Lists
📌 Covered in this chapter:
Unordered Lists <ul> · Ordered Lists <ol> · Description Lists <dl> <dt> <dd> · Nested Lists · List Attributes (start, reversed, type) · FAQ Question/Answer Lists
Welcome to Phase 4 (Chapter 9): Lists! HTML lists structure related items. In this chapter, we master unordered bullet lists (
<ul>), ordered numbered lists (<ol>), key-value description lists (<dl>, <dt>, <dd>), nested multi-level lists, and list attributes (start, reversed, type).
1Unordered (<ul>) vs Ordered (<ol>) Lists
HTML — Unordered & Ordered Lists
▶ Run in HTML Editor
<!-- Unordered List -->
<ul>
<li>HTML5 Structure</li>
<li>CSS3 Styling</li>
<li>JavaScript Logic</li>
</ul>
<!-- Ordered List with Custom Start & Reversed -->
<ol start="5" reversed>
<li>Fifth Step</li>
<li>Fourth Step</li>
</ol>2Description Lists (<dl>, <dt>, <dd>) & Nested Lists
HTML — Description & Nested Lists
▶ Run in HTML Editor
<!-- Description List for Terms & Definitions -->
<dl>
<dt><strong>HTML5</strong></dt>
<dd>Standard markup language for web pages.</dd>
<dt><strong>CSS3</strong></dt>
<dd>Stylesheet language for visual design.</dd>
</dl>
<!-- Nested Multi-Level List -->
<ul>
<li>Front-End
<ul>
<li>HTML5</li>
<li>CSS3</li>
</ul>
</li>
</ul>❓ Frequently Asked Questions (FAQ)
Q1: When should I use a Description List (<dl>)?
Use description lists (<dl>) for dictionary terms, key-value metadata lists, or FAQ question-and-answer pairs.