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
- <ul>: Unordered list with bullet points
- <ol>: Ordered list with numbers
- <li>: List item (used in both ul and ol)
- <dl>: Description list for term/definition pairs
- <dt>: Definition term
- <dd>: Definition description
- Nesting: Lists can contain other lists