📘 Lesson  ·  Lesson 11

Lists: ul, ol, dl

Lists: ul, ol, dl

The Three List Types

<!-- 1. UNORDERED (ul): order doesn't matter - bullets -->
<ul>
    <li>Notebook</li>
    <li>Pen</li>
    <li>Water bottle</li>
</ul>

<!-- 2. ORDERED (ol): order MATTERS - numbers -->
<ol>
    <li>Fill the admission form</li>
    <li>Attach documents</li>
    <li>Submit at office</li>
</ol>
• Notebook 1. Fill the admission form • Pen 2. Attach documents • Water bottle 3. Submit at office
The decision is one question: does the ORDER carry meaning? School bag items — any order, use ul. Admission steps — step 2 before step 1 is nonsense, use ol. Both use the same <li> (list item) inside; only the wrapper changes. Rule: <li> can live ONLY inside ul/ol — never loose.

Ordered List Superpowers: type, start, reversed

<ol type="a">              a, b, c...        (also: A, i, I, 1)
<ol type="I">              I, II, III...     (Roman - perfect for exam papers!)
<ol start="5">             5, 6, 7...        (continue a list after a break)
<ol reversed>              3, 2, 1...        (countdowns, top-10 lists)
Question paper style: I. Section A - Objective II. Section B - Short Answers III.Section C - Long Answers

Real use of start: a list of 10 steps with a paragraph of explanation after step 4 — the second <ol start="5"> continues numbering seamlessly instead of restarting at 1.

Description Lists — the forgotten third type

<dl>
    <dt>HTML</dt>
    <dd>Structure of the page — the bricks and walls.</dd>
    <dt>CSS</dt>
    <dd>Styling of the page — the paint.</dd>
</dl>
HTML Structure of the page — the bricks and walls. CSS Styling of the page — the paint.

dl = description list, dt = term, dd = its description (auto-indented). Perfect for glossaries, FAQ pages, and "word: meaning" content — exactly the shape of school definition answers.

Nested Lists — list inside a list

<ul>
    <li>Science
        <ul>
            <li>Physics</li>
            <li>Chemistry</li>
        </ul>
    </li>
    <li>Maths</li>
</ul>
• Science ○ Physics ○ Chemistry • Maths
The one rule that decides valid vs broken nesting: the inner <ul> goes INSIDE the parent <li> (before its </li>), not between two li's. Notice the bullet even changes (• → ○) to show depth. Every website's dropdown menu is exactly this structure — nested lists styled with CSS.

Exam Corner

Q: Difference between ul and ol? ul = bullets, order meaningless; ol = numbers, order matters.

Q: Roman numbering in a list? <ol type="I"> (capital i).

Q: Which tags make a description list? dl (wrapper), dt (term), dd (description).

Q: Start numbering from 10? <ol start="10">.

Q: Where exactly does a nested list go? Inside the parent <li>, before its closing tag.

तीन तरह की Lists

<!-- 1. UNORDERED (ul): order mayne nahi rakhta - bullets -->
<ul>
    <li>Notebook</li>
    <li>Pen</li>
    <li>Water bottle</li>
</ul>

<!-- 2. ORDERED (ol): order MAYNE rakhta hai - numbers -->
<ol>
    <li>Admission form bharo</li>
    <li>Documents lagao</li>
    <li>Office me jama karo</li>
</ol>
• Notebook 1. Admission form bharo • Pen 2. Documents lagao • Water bottle 3. Office me jama karo
फैसला एक सवाल से: क्या ORDER का कोई मतलब है? School bag का सामान — कोई भी क्रम, ul. Admission के steps — step 1 से पहले step 2 बेतुका है, ol. दोनों के अंदर same <li> (list item); सिर्फ wrapper बदलता है. Rule: <li> सिर्फ ul/ol के अंदर रह सकता है — कभी अकेला नहीं.

Ordered List की Superpowers: type, start, reversed

<ol type="a">              a, b, c...        (aur bhi: A, i, I, 1)
<ol type="I">              I, II, III...     (Roman - exam papers ke liye perfect!)
<ol start="5">             5, 6, 7...        (break ke baad list continue)
<ol reversed>              3, 2, 1...        (countdowns, top-10 lists)
Question paper style: I. Section A - Objective II. Section B - Short Answers III.Section C - Long Answers

start का असली use: 10 steps की list जिसमें step 4 के बाद समझाने वाला paragraph है — दूसरी <ol start="5"> numbering वहीं से आगे बढ़ाती है, 1 से restart नहीं.

Description Lists — भूला हुआ तीसरा type

<dl>
    <dt>HTML</dt>
    <dd>Page ki structure — eentein aur deewarein.</dd>
    <dt>CSS</dt>
    <dd>Page ki styling — paint.</dd>
</dl>
HTML Page ki structure — eentein aur deewarein. CSS Page ki styling — paint.

dl = description list, dt = term (शब्द), dd = उसका description (अपने आप indent). Glossaries, FAQ pages और "शब्द: अर्थ" content के लिए perfect — school की definition answers की exact shape.

Nested Lists — list के अंदर list

<ul>
    <li>Science
        <ul>
            <li>Physics</li>
            <li>Chemistry</li>
        </ul>
    </li>
    <li>Maths</li>
</ul>
• Science ○ Physics ○ Chemistry • Maths
वह एक rule जो valid और टूटी nesting तय करता है: अंदर वाली <ul> parent <li> के ANDAR जाती है (उसके </li> से पहले), दो li के बीच नहीं. देखिए bullet भी बदलता है (• → ○) depth दिखाने को. हर website का dropdown menu यही structure है — CSS से सजी nested lists.

Exam Corner

Q: ul और ol में अंतर? ul = bullets, order बेमानी; ol = numbers, order मायने रखता है.

Q: List में Roman numbering? <ol type="I"> (capital i).

Q: Description list कौन-से tags बनाते हैं? dl (wrapper), dt (term), dd (description).

Q: Numbering 10 से शुरू? <ol start="10">.

Q: Nested list exactly कहां जाती है? Parent <li> के अंदर, उसके closing tag से पहले.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.