📋 HTML Lists

Organize Content with Lists

Types of HTML Lists

HTML provides three types of lists: unordered lists (bullets), ordered lists (numbers), and description lists (term/definition pairs).

💻 Unordered Lists

<!-- Basic unordered list -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Nested unordered list -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Python</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

🔢 Ordered Lists

<!-- Basic ordered list -->
<ol>
    <li>Open code editor</li>
    <li>Write HTML code</li>
    <li>Save the file</li>
    <li>Open in browser</li>
</ol>

<!-- Start from different number -->
<ol start="5">
    <li>Step 5</li>
    <li>Step 6</li>
    <li>Step 7</li>
</ol>

<!-- Reverse order -->
<ol reversed>
    <li>Third place</li>
    <li>Second place</li>
    <li>First place</li>
</ol>

<!-- Different numbering types -->
<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>

<ol type="I">
    <li>Roman I</li>
    <li>Roman II</li>
</ol>

📖 Description Lists

<!-- Description list (term and definition) -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - structures web content</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - styles web pages</dd>
    
    <dt>JavaScript</dt>
    <dd>Programming language - adds interactivity</dd>
</dl>

<!-- Multiple definitions for one term -->
<dl>
    <dt>Coffee</dt>
    <dd>A hot beverage</dd>
    <dd>Made from roasted coffee beans</dd>
</dl>

🎨 Nested Lists

<!-- Complex nested structure -->
<ul>
    <li>Web Development
        <ol>
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Learn JavaScript
                <ul>
                    <li>Variables</li>
                    <li>Functions</li>
                    <li>DOM</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>Build Projects</li>
</ul>

🎯 Key Takeaways