डाउनलोड पी.डी.एफ. ई-बुक्स
HTML - HTML Lists

HTML में कोई topic मुद्दों के अनुसार और किसी information को list के अनुसार देना हो तो html ordered और unordered list इन tags का इस्तेमाल किया जाता है |


HTML Listing Elements

Listing ElementsExampleDescription
<ul>
  • Unordered List
  • Unordered List
  • Unordered List
ये unordered list होता है | ये list के items के लिए simple bullets का इस्तेमाल करते है |
<ol>
  1. Ordered List
  2. Ordered List
  3. Ordered List
ये ordered list होता है | ये अलग-अलग numbers अपने list के items के लिए इस्तेमाल करते है |

 

HTML Unordered List

Unordered list की शुरुआत <u> tag से होती है और unordered list का हर एक list item <li> और </li> के अन्दर close होता है | Unordered list के हर item को by default; bullet से निर्देशित किया जाता है |

Source Code :
<ul>
<li>Apple</li>
<li>Orangle</li>
<li>Pineapple</li>
<li>Banana</li>
<li>Strawberry</li>
</ul>
Output :
  • Apple
  • Orangle
  • Pineapple
  • Banana
  • Strawberry

'type' Attribute for HTML

Attribute's ValueDescription
circleइस value की मदद से हर list item को circle से निर्देशित किया जाता है |
squareइस value की मदद से हर list item को square से निर्देशित किया जाता है |
discइस value की मदद से हर list item को disc से निर्देशित किया जाता है | ये by default; unordered list पर स्थित होता है |
noneइस value की मदद से हर list item को निर्देशित नहीं किया जाता है |

 

Example for Unordered List's type Attribute in HTML

Source Code :
<p>circle value</p>
<ul type="circle">
<li>Apple</li>
<li>Orangle</li>
</ul>

<p>square value</p>
<ul type="square">
<li>Apple</li>
<li>Orangle</li>
</ul>

<p>disc value</p>
<ul type="disc">
<li>Apple</li>
<li>Orangle</li>
</ul>

<p>none value</p>
<ul type="none">
<li>Apple</li>
<li>Orangle</li>
</ul>
Output :

circle value

  • Apple
  • Orangle

square value

  • Apple
  • Orangle

disc value

  • Apple
  • Orangle

none value

  • Apple
  • Orangle

Nested Unordered List in HTML

Nested unordered list में unordered list में unordered lists होते है |

Note : 1st nested unordered list का type attribute; default 'circle' set होता है और 1st nested unordered list के 1st nested unordered list का type attribute; default 'square' set होता है |

Source Code :
<ul>
<li>Apple</li>
<li>Orangle</li>
<ul>
<li>Banana</li>
<li>Strawberry</li>
<ul>
<li>Papaya</li>
<li>Pineapple</li>
</ul>
<li>Cherry</li>
</ul>
<li>Mango</li>
</ul>
Output :
  • Apple
  • Orangle
    • Banana
    • Strawberry
      • Papaya
      • Pineapple
    • Cherry
  • Mango

HTML Ordered List

Ordered list की शुरुआत <ol> tag से होती है और इसमे हर एक item की शुरुआत <li> tag से होती है |

Source Code :
<ol>
<li>Apple</li>
<li>Orangle</li>
<li>Pineapple</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
Output :
  1. Apple
  2. Orangle
  3. Pineapple
  4. Banana
  5. Strawberry

Ordered List's type Attribute in HTML

Attribute's ValueDescription
type="1"हर list item को number दिया जाता है |
type="a"हर list item को lowercase alphabet दिया जाता है |
type="A"हर list item को uppercase alphabet दिया जाता है |
type="i"हर list item को lowercase roman number दिया जाता है |
type="I"हर list item को uppercase roman number दिया जाता है |

 

Example for Ordered List's type Attribute in HTML

Source Code :
<p>Default type</p>
<ol>
<li>Apple</li>
<li>Orangle</li>
</ol>

<p>type="1"</p>
<ol type="1">
<li>Apple</li>
<li>Orangle</li>
</ol>

<p>type="a"</p>
<ol type="a">
<li>Apple</li>
<li>Orangle</li>
</ol>

<p>type="A"</p>
<ol type="A">
<li>Apple</li>
<li>Orangle</li>
</ol>

<p>type="i"</p>
<ol type="i">
<li>Apple</li>
<li>Orangle</li>
</ol>

<p>type="I"</p>
<ol type="I">
<li>Apple</li>
<li>Orangle</li>
</ol>
Output :

Default type

  1. Apple
  2. Orangle

type="1"

  1. Apple
  2. Orangle

type="a"

  1. Apple
  2. Orangle

type="A"

  1. Apple
  2. Orangle

type="i"

  1. Apple
  2. Orangle

type="I"

  1. Apple
  2. Orangle

Nested Ordered List in HTML

Nested Ordered list में Ordered list में Ordered lists होते है |

Source Code :
<ol>
<li>Apple</li>
<li>Orangle</li>
<ol>
<li>Banana</li>
<li>Strawberry</li>
<ol>
<li>Papaya</li>
<li>Pineapple</li>
</ol>
<li>Cherry</li>
</ol>
<li>Mango</li>
</ol>
Output :
  1. Apple
  2. Orangle
    1. Banana
    2. Strawberry
      1. Papaya
      2. Pineapple
    3. Cherry
  3. Mango