HTML Lists — ul, ol, dl
HTML has three types of lists. Unordered lists for bullet points, ordered lists for numbered steps, and definition lists for terms and their explanations. Lists are used everywhere — navigation menus, instructions, FAQs, and more.
Unordered List — ul
Example 1 — Bullet List with Nested Items
<ul> <li>HTML — Structure</li> <li>CSS — Style <!-- Nested list inside a list item --> <ul> <li>Flexbox</li> <li>Grid</li> <li>Animations</li> </ul> </li> <li>JavaScript — Behaviour</li> </ul>
- HTML — Structure
- CSS — Style
- Flexbox
- Grid
- Animations
- JavaScript — Behaviour
Nested lists: put a ul or ol inside a li. The browser automatically indents nested lists.
Ordered List — ol
Example 2 — Numbered Steps
<ol> <li>Open VS Code</li> <li>Create a new file called index.html</li> <li>Type your HTML code</li> <li>Save with Ctrl+S</li> <li>Open in browser to preview</li> </ol> <!-- Start numbering from 5 --> <ol start="5"> <li>Continuing from step 5</li> </ol>
- Open VS Code
- Create a new file called index.html
- Type your HTML code
- Save with Ctrl+S
- Open in browser to preview
ol is perfect for steps, recipes, instructions, rankings — anything where order matters.
Definition List — dl
Example 3 — Terms and Definitions
<dl> <dt>HTML</dt> <dd>HyperText Markup Language. The structure of every webpage.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets. Controls colors, fonts, and layout.</dd> <dt>JavaScript</dt> <dd>Programming language for interactive web pages.</dd> </dl>
- HTML
- HyperText Markup Language. The structure of every webpage.
- CSS
- Cascading Style Sheets. Controls colors, fonts, and layout.
- JavaScript
- Programming language for interactive web pages.
dl is perfect for glossaries, FAQs, metadata key-value pairs. dt = term. dd = description.
Lists Help SEO
Search engines understand lists as structured content. A page with a ul list of HTML tips is more likely to appear in Google's "featured snippets" box at the top of search results than the same content written as plain paragraphs.
Why li Cannot Exist Without ul/ol
The li tag is only valid inside ul, ol, or menu elements. This is an HTML rule — not a convention. Browsers try to correct invalid HTML, but Google and accessibility tools may misinterpret orphaned li tags.