Chapter 10HTML Tutorial~1 min read

HTML Lists

ul, ol, dl — तीन प्रकारच्या Lists

आपल्या रोजच्या जीवनात lists खूप वापरतो — shopping list, to-do list, recipe steps. Web pages वर पण data नीटपणे दाखवण्यासाठी HTML lists वापरतात.

HTML मध्ये तीन प्रकारच्या Lists

▸Unordered List (<ul>): Bullet points सह दाखवते. Order matter करत नाही.
▸Ordered List (<ol>): Numbers (1, 2, 3) किंवा letters सह. Order important असतो.
▸Definition List (<dl>): Dictionary सारखे — term + definition. Glossary साठी.

Unordered List — <ul>

Unordered List — उदाहरण

html

<h3>माझे आवडते Tech Topics:</h3>
<ul>
    <li>Networking</li>
    <li>Cloud Computing</li>
    <li>SQL Database</li>
    <li>Web Development</li>
</ul>

<!-- Browser output:
• Networking
• Cloud Computing
• SQL Database
• Web Development -->

Ordered List — <ol>

Ordered List — उदाहरण

html

<h3>HTML शिकण्याचे Steps:</h3>
<ol>
    <li>HTML Basics शिका</li>
    <li>CSS ने styling करा</li>
    <li>JavaScript ने interactivity जोडा</li>
    <li>एक Framework शिका (React / Vue)</li>
</ol>

<!-- Browser output:
1. HTML Basics शिका
2. CSS ने styling करा
3. JavaScript ने interactivity जोडा
4. एक Framework शिका -->

Definition List — <dl>

Definition List — उदाहरण

html

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — web pages बनवण्यासाठी</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — web pages style करण्यासाठी</dd>

    <dt>JavaScript</dt>
    <dd>Web pages interactive बनवण्यासाठी</dd>
</dl>
<!-- dt = definition term | dd = definition description -->

Nested Lists — List आत List

Nested List — उदाहरण

html

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Marathi Analogy

🛒 Analogy: Grocery list मध्ये items चा order matter नाही (unordered list). Recipe मध्ये steps चा order खूप important असतो — "Step 1: कांदा चिरा, Step 2: तेल गरम करा" (ordered list). Dictionary मध्ये term + meaning (definition list).

✅ Key Points — लक्षात ठेवा

▸<ul> — Unordered List (bullet points), order matter नाही
▸<ol> — Ordered List (1, 2, 3), order important
▸<dl>, <dt>, <dd> — Definition List (term + definition)
▸<li> — List Item, ul किंवा ol च्या आत
▸Navigation menus पण unordered lists (<ul><li>) ने बनवतात

0/13 chapters पूर्ण

मागे — Previous

HTML Images

पुढे — Next

HTML Tables