HTML Mastery · Chapter 4
Lists — ul, ol, dl & All Attributes
HTML provides three types of lists: unordered, ordered, and description lists. Each has unique attributes and nesting capabilities.
Unordered List <ul>
Creates a bulleted list where order doesn't matter. Items use <li> tags.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
- HTML
- CSS
- JavaScript
Ordered List <ol> — All Attributes
Creates a numbered list where sequence matters. Supports several powerful attributes:
| Attribute | Values | Effect |
|---|---|---|
| type | 1 (default numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman) | Changes the counter style for all list items. |
| start | Integer (e.g., 3) | Starts the list at a specific number. Useful when splitting a list across content. |
| reversed | Boolean (no value needed) | Counts items in reverse order (10, 9, 8… down to 1). |
type="A" start="3"
- First item (C)
- Second item (D)
- Third item (E)
type="I" reversed
- Third
- Second
- First
<li> List Item Attributes
| Attribute | Applies to | Purpose |
|---|---|---|
| value | <li> inside <ol> | Overrides the counter for this specific item and all following items. E.g., <li value="10"> starts counting from 10. |
- Item 1
- Item 5 (jumped!)
- Item 6 (auto)
- Item 7 (auto)
Nested Lists
Lists can be nested inside each other by placing a new list inside an <li>:
<ol>
<li>Front-End
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Back-End
<ul>
<li>Node.js</li>
</ul>
</li>
</ol>
- Front-End
- HTML
- CSS
- Back-End
- Node.js
Description List <dl>
A semantic list of term-definition pairs. Used for glossaries, metadata, FAQ sections. No <li> — uses <dt> (term) and <dd> (definition).
| Tag | Purpose |
|---|---|
| <dl> | Description list container. |
| <dt> | Description term — the word or name being described. Can have multiple <dt> for one <dd>. |
| <dd> | Description details — the definition or value. Can have multiple <dd> for one <dt>. Indented by browsers by default. |
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JS
- JavaScript
CSS Tip: Control list appearance with CSS:
list-style-type: none— removes bullets/numberslist-style-type: square— square bulletslist-style-image: url(icon.svg)— custom image as bulletlist-style-position: inside— wraps text under bullet
Chapter Summary
<ul>for unordered lists;<ol>for ordered/numbered lists<ol>supportstype,start, andreversedattributes<li value="N">overrides the counter for ordered lists<dl>+<dt>+<dd>creates glossaries and definition pairs- Lists can be nested to any depth by placing a new list inside an
<li>