HTML gives you three list types — ordered, unordered, and description lists — for grouping related items so both browsers and assistive technology understand them as a genuine list, not just visually indented text.
Why Real List Markup Matters
A screen reader announces "list, 4 items" when it hits a real <ul> or <ol>, giving the user a sense of scope before diving in. Text that just looks like a list (dashes and line breaks) gives none of that.
Syntax
<ul>
<li>Unordered item</li>
</ul>
<ol>
<li>Ordered item</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>Basic Example
<h2>What You'll Learn</h2>
<ul>
<li>HTML fundamentals</li>
<li>CSS layout and styling</li>
<li>JavaScript basics</li>
</ul>Browser output: three bulleted lines by default — the browser adds the bullet marker and indentation automatically; you never type bullet characters yourself.
Choosing the Right List Type
| List type | Use when... |
|---|---|
Unordered (<ul>) | Order genuinely doesn't matter — features, ingredients, navigation links |
Ordered (<ol>) | Sequence matters — steps in a recipe, ranked results, instructions |
Description (<dl>) | Pairing terms with their definitions or values — a glossary, key-value metadata |
Common Mistakes
- Faking a list with manual dashes/bullets and
<br>tags instead of real<ul>/<li>markup - Choosing
<ul>when the content is genuinely sequential (like numbered steps) — that should be<ol>
Best Practices
- Always use real list markup for anything that's genuinely a list of items
- Pick
<ol>vs<ul>based on whether sequence actually matters to the content's meaning
Accessibility Considerations
Real list markup lets screen readers announce the list's scope ("list, 5 items") upfront, and lets users jump between list items with dedicated navigation shortcuts — none of which works on visually-faked lists.
SEO Considerations
Well-structured lists are more likely to be pulled into rich search results like featured snippets — search engines specifically look for real <ol>/<ul> markup for "how to" and "best X" style content.
Browser & Modern HTML Notes
All three list elements have been part of HTML since its earliest versions and remain unchanged today — a genuinely stable corner of the language.
Mini Practice
- Build a short unordered list of your three favorite programming languages.
- Rewrite a "step 1, step 2, step 3" paragraph as a proper ordered list.
