HTML Lists: ul, ol, and dl
HTML has three list types. Lists are powerful for SEO — Google often extracts ordered lists directly into Featured Snippets at the very top of search results.
Unordered List — Bullet Points
Use <ul> when order doesn't matter:
Example — Unordered List
<ul> <li>HTML — structure of web pages</li> <li>CSS — styles and layout</li> <li>JavaScript — interactivity</li> </ul>
- HTML — structure of web pages
- CSS — styles and layout
- JavaScript — interactivity
Ordered List — Numbered Steps
Use <ol> when order matters. Google loves these for Featured Snippets:
Example — Ordered List
<ol> <li>Learn HTML structure</li> <li>Add CSS styling</li> <li>Add JavaScript behavior</li> <li>Deploy to the web</li> </ol>
- Learn HTML structure
- Add CSS styling
- Add JavaScript behavior
- Deploy to the web
Google extracts ordered lists for "How to" Featured Snippets — this puts you at position zero!
Description List — Terms and Definitions
Example — Description List
<dl> <dt>HTML</dt> <dd>Structure of web pages</dd> <dt>CSS</dt> <dd>Controls how pages look</dd> </dl>
- HTML
- Structure of web pages
- CSS
- Controls how pages look
Nested List
Example — Nested List inside li
<ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> </ul> </li> </ul>
- Frontend
- HTML
- CSS
The nested ul goes INSIDE the li element, not after it.
Valid Children Only
Only <li> elements are valid direct children of ul and ol. Never put p, div, or span directly inside a list — always wrap in li first.
Lists Before the Web
HTML list tags were modeled after academic typesetting conventions. The dl tag was designed for computer science glossaries where defining technical terms precisely was fundamental to academic writing.