WHAT ARE HTML LISTS?

HTML में Lists का उपयोग information को एक structured format में represent करने के लिए किया जाता है।

Lists की सहायता से related items को एक साथ group किया जा सकता है।

HTML में मुख्य रूप से तीन प्रकार की Lists होती हैं:

1. Unordered List (<ul>)

2. Ordered List (<ol>)

3. Description List (<dl>)

🔹 1. UNORDERED LIST

Unordered List का उपयोग तब किया जाता है जब list में items का कोई specific sequence या order important नहीं होता।

इसमें items को सामान्यतः bullets (•) के साथ display किया जाता है, numbers के साथ नहीं।

Unordered List बनाने के लिए <ul> tag और प्रत्येक item के लिए <li> tag का उपयोग किया जाता है।

Syntax:

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

Example:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Output:

• HTML

• CSS

• JavaScript

👉 Attributes of <ul>

पुराने HTML में <ul> के साथ type attribute का उपयोग bullet का style बदलने के लिए किया जाता था।

Example:

<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Note: Modern HTML में list bullet styling के लिए generally CSS का उपयोग किया जाता है।

🔹 2. ORDERED LIST

Ordered List का उपयोग तब किया जाता है जब list के items का specific order या sequence important होता है।

इसमें items सामान्यतः numbers के साथ display होते हैं।

Ordered List बनाने के लिए <ol> tag का उपयोग किया जाता है और प्रत्येक item को <li> tag के अंदर लिखा जाता है।

Syntax:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

Example:

<ol>
    <li>Open the browser</li>
    <li>Open the HTML file</li>
    <li>View the webpage</li>
</ol>

Output:

1. Open the browser

2. Open the HTML file

3. View the webpage

👉 Attributes of <ol>

<ol> में मुख्य रूप से type, start और reversed जैसे attributes का उपयोग किया जा सकता है।

type Example:

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output:

A. HTML
B. CSS
C. JavaScript

start Example:

<ol start="5">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output:

5. HTML

6. CSS

7. JavaScript

reversed Example:

<ol reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output:

3. HTML

4. CSS

5. JavaScript

🔹 3. DESCRIPTION LIST

Description List का उपयोग किसी term और उसकी description/meaning को represent करने के लिए किया जाता है।

उदाहरण के लिए किसी technical term के साथ उसका meaning या explanation लिखना हो, तो Description List का उपयोग किया जा सकता है।

Description List बनाने के लिए तीन tags का उपयोग होता है:

Syntax:

<dl>

    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>

</dl>

Example:

<dl>

    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>

    <dt>HTTP</dt>
    <dd>HyperText Transfer Protocol</dd>

</dl>

यहाँ:

• <dl> → पूरी Description List का container है।

• <dt> → Term/word को define करता है।

• <dd> → Term की description या meaning बताता है।

⭐ QUICK REVISION

Important Tags

<ul>  → Unordered List
<ol>  → Ordered List
<li>  → List Item
<dl>  → Description List
<dt>  → Description Term
<dd>  → Description Details