Lesson 54 of 55 · HTML
Lists
Duration: 8 min
Lists
HTML offers three list types to convey ordered, unordered, and definition data.
Unordered list
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Ordered list
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
Definition list
<dl>
<dt>HTML</dt>
<dd>Markup language for structuring web content.</dd>
<dt>CSS</dt>
<dd>Style sheet language for presentation.</dd>
</dl>
Accessibility notes
- Use the semantic list elements (
<ul>,<ol>,<dl>) instead of generic<div>s – screen readers announce the list type and length automatically. - For complex nested lists, keep the nesting depth to a maximum of three levels to preserve readability.
- CSS
list-style-typeor the modern::markerpseudo‑element lets you customise bullets without affecting semantics. - When a list represents a set of actions or steps that are not inherently ordered, prefer
<ul>with proper headings.
Quick cheat‑sheet
- Menu or navigation →
<ul>with<a>inside<li>. - Procedural steps →
<ol>. - Key‑value pairs (FAQ, glossary) →
<dl>. - Custom bullets →
list-style-typeor::marker.
Tip: Avoid mixing list types inside the same parent unless the content truly requires it; it can confuse assistive technology.
Quick checklist for lists
- Correct list element used for the content type? ✅
- Nesting depth limited to three levels? ✅
- No presentation‑only
<div>used in place of a list? ✅ ::markerorlist-style-typeused for custom bullets? ✅- List headings (
<h2>, etc.) present when appropriate? ✅
If any answer is “no”, refactor the markup now.