HTML Lists (HTML सूचियाँ)

Web pages पर information को organized और structured way में present करने के लिए Lists का use किया जाता है। चाहे वह "Cooking Recipe" के steps हों, "Features of Computer" की list हो, या "Navigation Menu" हो, HTML हमें data को group करने के लिए 3 main types की lists provide करता है।

1. Unordered Lists (<ul>)

जब list items का Sequence (क्रम) important नहीं होता, तब हम Unordered List का use करते हैं।

• Concept: इसमें items के आगे numbers की जगह small symbols होते हैं जिन्हें Bullets कहते हैं।

• Tags Used:

  • <ul>: यह list को start करता है (Unordered List)।

  • <li>: यह list के अंदर हर एक item को define करता है (List Item)।

The type Attribute

Unordered list में bullet का style change करने के लिए type attribute का use किया जाता है।

• type="disc": (Default) एक भरा हुआ round dot (●).

• type="circle": एक खाली round circle (○).

• type="square": एक square box (■).

Example Code:

HTML

<p>Computer Components (Unordered List):</p>
<ul type="square">
    <li>Monitor</li>
    <li>Keyboard</li>
    <li>Mouse</li>
</ul>

Output:

■ Monitor

■ Keyboard

■ Mouse

2. Ordered Lists (<ol>)

जब list items का Order या priority important होती है (जैसे Rank list या Step-by-step instructions), तब हम Ordered List का use करते हैं।

• Concept: इसमें items automatically numbered होते हैं (जैसे 1, 2, 3...).

• Tags Used:

  • <ol>: यह list को start करता है (Ordered List)।

  • <li>: यह list के items को define करता है (List Item)।

Attributes of <ol>

Ordered list को customize करने के लिए दो important attributes होते हैं:

A. The type Attribute:

यह numbering का format decide करता है।

• type="1": 1, 2, 3 (Default Numbers)

• type="A": A, B, C (Uppercase Letters)

• type="a": a, b, c (Lowercase Letters)

• type="I": I, II, III (Uppercase Roman Numerals)

• type="i": i, ii, iii (Lowercase Roman Numerals)

B. The start Attribute:

कई बार हम चाहते हैं कि list 1 से शुरू न होकर किसी और number से start हो। इसके लिए start attribute use होता है।

• Example: <ol start="50"> (List 50 से start होगी)।

Example Code:

HTML

<p>Top 3 Programming Languages (Ordered List):</p>
<ol type="A" start="1">
    <li>Python</li>
    <li>Java</li>
    <li>C++</li>
</ol>

Output:

A. Python

B. Java

C. C++

3. Definition Lists (<dl>)

यह list type अक्सर students द्वारा ignore कर दी जाती है, लेकिन exams में बहुत important है। इसे Description List भी कहते हैं।

• Concept: यह list type "Dictionary" या "Glossary" की तरह work करती है। जब हमें Terms (शब्द) और उनकी Definitions (परिभाषाएं) लिखनी होती हैं, तब इसका use होता है।

• Difference: इसमें <li> tag का use नहीं होता।

Tags Used:

1. <dl> (Definition List): यह पूरी list का container tag है।

2. <dt> (Definition Term): यह उस heading या word को define करता है जिसके बारे में हम बताने वाले हैं।

3. <dd> (Definition Description): यह उस term की detail या definition है। Browser इसे automatically indent (थोड़ी जगह छोड़कर) करता है।

Example Code:

HTML

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language is used to create web pages.</dd>
    
    <dt>CPU</dt>
    <dd>Central Processing Unit is the brain of the computer.</dd>
</dl>

Output:

HTML

HyperText Markup Language is used to create web pages.

CPU

Central Processing Unit is the brain of the computer.

4. Nested Lists (Lists के अंदर Lists)

HTML allow करता है कि हम एक list के अंदर दूसरी list create कर सकें। इसे Nested List कहते हैं। इसका use अक्सर "Table of Contents" या complex menu बनाने में होता है।

Example Code:

HTML

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Mango</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

Summary Table (Exam Revision)

List Type	Tag	Item Tag	Attributes	Use Case
Unordered	<ul>	<li>	type (disc, circle, square)	जब order important न हो (Bullet points)।
Ordered	<ol>	<li>	type, start	जब sequence important हो (Numbering)।
Definition	<dl>	<dt>, <dd>	None	Terms और definitions के लिए (Dictionary style)।

User Note: PGDCA/DCA practical exams में अक्सर <ol> tag के start attribute और <dl> tag के structure पर viva questions पूछे जाते हैं।