HTML lists group related items so browsers, screen readers, and search engines understand they belong together. HTML provides three kinds: unordered (ul), ordered (ol), and description (dl) lists.
If items can be shuffled without changing meaning (shopping, features, tags), use <ul>. If sequence is the point (recipe steps, directions, rankings), use <ol>.
Use a <dl> with <dt> (term) and <dd> (description) for glossaries, FAQs, and name–value style content.
Navigation menus are often a ul of links inside <nav>. Nested lists build outlines and sub-steps under a parent item.
Choose ul, ol, or dl by meaning. Change bullets or numbers with CSS later.
Separate lines of text are not a list. Real list markup helps accessibility and styling.
The three list patterns you will use most:
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
</ul><ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>The school is on your right</li>
</ol><dl>
<dt>HTML</dt>
<dd>Markup language for web pages.</dd>
<dt>CSS</dt>
<dd>Stylesheet language for design.</dd>
</dl><ol>
<li>Process into a paste.
<ul>
<li>Short blend for chunky hummus</li>
<li>Longer blend for smooth hummus</li>
</ul>
</li>
</ol>Tags and when to reach for them:
| Element | Role |
|---|---|
<ul> | Unordered (bullet) list |
<ol> | Ordered (numbered) list |
<li> | One item inside ul or ol |
<dl> | Description / definition list |
<dt> | Term / name in a dl |
<dd> | Description / value (one term can have several) |
| Content | Use |
|---|---|
| Shopping / features / tags | ul |
| Steps / directions / rankings | ol |
| Glossary / FAQ pairs | dl + dt/dd |
| Site menu links | nav > ul > li > a |
| Sub-bullets under a step | Nested ul/ol inside an li |
| Tool | Effect |
|---|---|
type on ol | 1, A, a, I, i |
start on ol | Start numbering at a value other than 1 |
reversed on ol | Count downward |
CSS list-style-type | Change bullets / numbers without changing meaning |
A simple workflow:
ul, ol, or dl.li (or dt/dd for descriptions).li, not beside it.| Goal | HTML pattern |
|---|---|
| Bullet list | <ul><li>…</li></ul> |
| Numbered steps | <ol><li>…</li></ol> |
| Term + meaning | <dl><dt>…</dt><dd>…</dd></dl> |
| Sub-items | <li>Parent<ul>…</ul></li> |
Switch between the three list types and see default browser rendering.
Six patterns: unordered, ordered, description, CSS markers, nesting, and a full page.
<h1>Shopping list</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul><h1>Recipe steps</h1>
<ol>
<li>Preheat the oven to 180°C</li>
<li>Mix the dry ingredients</li>
<li>Bake for 25 minutes</li>
</ol><dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language for designing web pages.</dd>
</dl>dds.<style>
ol.alpha { list-style-type: upper-alpha; }
ul.circle { list-style-type: circle; }
</style>
<ol class="alpha">
<li>Item A</li>
<li>Item B</li>
</ol>ol / ul.<ul>
<li>HTML Basics
<ul>
<li>Headings</li>
<li>Paragraphs</li>
</ul>
</li>
<li>CSS Basics</li>
</ul>li.ul as a direct child of ul.Combine unordered, ordered, nested, and description lists:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Lists Example</title>
<style>
ul { list-style-type: circle; }
ol { list-style-type: upper-alpha; }
</style>
</head>
<body>
<h1>HTML Lists Example</h1>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>Markup for structure.</dd>
</dl>
</body>
</html>Most list bugs are wrong list type or invalid nesting.
Numbers imply sequence. Prefer ul for feature lists and tags.
Put the nested ul/ol inside the parent li.
Screen readers will not announce a real list. Use list elements.
dl is for name/description pairs, not a substitute for ul.
Style li directly when you can. Keep the list structure clean.
If you set list-style: none for a menu, ensure focus and structure stay clear.
ul, ol, li, and dl/dt/dd are foundational HTML and work in every browser. Prefer semantic lists; style markers with CSS.
Unordered, ordered, and description lists are supported everywhere HTML is rendered.
Bottom line: Pick ul, ol, or dl by meaning—then tune bullets and numbers with CSS.
li.One line: Pick ul, ol, or dl by what the content means—then wrap each item in li (or dt/dd).
Open a Try It demo and mix unordered, ordered, and description lists.
8 people found this page helpful