-->
Home
O Level

List in HTML

 

List Tags

इस टैग का प्रयोग items की लिस्ट को arrange करने के लिए किया जाता हैं यह टैग मुख्यतः तीन प्रकार की सूचियों का समर्थन करता है। जिसमे ordered list, unordered list and Definition list बना सकते है। विभिन्न Tag की सहायता से html मे आप आसानी से सूची बना सकते है। दोनो Ordered और Unordered सूची बनाने के लिये सूची के आरंभ तथा अंत मे Tag देना जरूरी है। साथ ही एक स्पेशल Tag जो यह बताता है कि प्रत्येक सूची घटक कहां से चालू होती है।

 
1. Ordered List
2. Unordered List
3. Definition List

 

HTML Unordered List

Unordered list की शुरुआत <ul> tag से होती है और unordered list का हर एक list item <li> और </li> के अन्दर close होता है |  

Example:

<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
<li>Banana</li>
<li>Strawberry</li>
</ul>
 

Output :

  • Apple
  • Orange
  • Pineapple
  • Banana
  • Strawberry

Type Attribute for Unordered List

Attribute's Value

Description

circle

इस value की मदद से हर list item को circle से निर्देशित किया जाता है |

square

इस value की मदद से हर list item को square से निर्देशित किया जाता है |

disc

इस value की मदद से हर list item को disc से निर्देशित किया जाता है | ये by default; unordered list पर स्थित होता है |

none

इस value की मदद से हर list item को निर्देशित नहीं किया जाता है |

 

Example :

<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 Value

Description

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:

<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
    1. Cherry
  1. Mango

Definition List in HTML

किसी शब्द या Term विशेष को परिभाषित करने के लिए Definition Lists को बनाया जाता हैl Definition List को <dl> Tag से Define किया जाता है l Definition Term को <dt> और Definition Description को <dd> Element से Define किया जाता हैl इसमें तीन टैग Use होते हैं l

dl - Definition list

dt - Definition term

dd - Definition data

 

Example

<dl> 

  <dt>Aries</dt> 

  <dd>-One of the 12 horoscope sign.</dd> 

  <dt>Bingo</dt> 

  <dd>-One of my evening snacks</dd> 

 <dt>Leo</dt> 

 <dd>-It is also an one of the 12 horoscope sign.</dd> 

  <dt>Oracle</dt> 

  <dd>-It is a multinational technology corporation.</dd>  

</dl> 

Output:

Aries
           -One of the 12 horoscope sign.
Bingo
           -One of my evening snacks
Leo
           -It is also an one of the 12 horoscope sign.
Oracle
           -It is a multinational technology corporation.

Post a Comment