Lists are everywhere on the web: shopping baskets, navigation menus, step-by-step instructions and top-10 rankings. HTML has three kinds of list, and choosing the right one is easy once you ask one question: does the order matter?
Marking up lists properly is about more than bullet points. Screen readers announce "list, 5 items" before reading a list, so visitors know what to expect, and search engines often pick up well-structured lists of steps or ingredients for their results pages.
Unordered lists: when order doesn't matter
Use <ul> (unordered list) when the items could appear in any order. Each item goes in an <li> (list item) element, and browsers show a bullet point in front of each one.
<ul>
<li>Sun cream</li>
<li>Sunglasses</li>
<li>Beach towel</li>
</ul>Only <li> elements may sit directly inside a <ul>. Headings, paragraphs and images can go inside an <li>, but not between list items.
Ordered lists: when order matters
Use <ol> (ordered list) for steps, rankings and instructions. Browsers number the items automatically, so if you insert a new step, everything renumbers itself.
Useful attributes:
start="5"begins counting at 5.reversedcounts down, which suits countdowns and "top 10" lists.type="A","a","I"or"i"switches to letters or Roman numerals.
A recipe's method, the steps to reset a password and a league table are all good candidates for <ol>.
Nested lists
A list can sit inside an <li> to create sub-points:
<ul>
<li>Fruit
<ul>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
</ul>The inner list goes inside the <li>, before its closing tag. This is how multi-level outlines and dropdown menus are built.
Description lists for terms and definitions
For pairs of terms and explanations, such as a glossary, a FAQ or product specifications, use <dl> (description list) with <dt> for each term and <dd> for its description:
<dl>
<dt>Weight</dt>
<dd>1.2 kg</dd>
<dt>Battery life</dt>
<dd>Up to 10 hours</dd>
</dl>HTML Lists Syntax
List syntax
<ul> <li>item</li> </ul>
<ol> <li>first</li> <li>second</li> </ol>
<dl> <dt>term</dt> <dd>description</dd> </dl>HTML Lists Summary
- Use
<ul>when order doesn't matter and<ol>when it does. - Every item in either list goes inside an
<li>element. - Attributes like
start,reversedandtypechange how ordered lists count. - Put a nested list inside an
<li>, not between items. - Use
<dl>,<dt>and<dd>for terms and their descriptions.
HTML Lists Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Shopping list and recipe steps
<h3>Shopping list</h3>
<ul>
<li>Avocados</li>
<li>Limes</li>
<li>Tortilla chips</li>
</ul>
<h3>How to make guacamole</h3>
<ol>
<li>Mash the avocados.</li>
<li>Squeeze in the lime juice.</li>
<li>Add salt and stir.</li>
<li>Eat immediately with chips.</li>
</ol>Line-by-line explanation
- Lines 2 to 6An unordered list: the order you buy things doesn't matter.
- Lines 9 to 14An ordered list: you can't eat it before mashing it! Numbers are added automatically.
Countdown and nested lists
<h3>Top 3 snacks of all time</h3>
<ol reversed>
<li>Popcorn</li>
<li>Nachos</li>
<li>Toast (controversial)</li>
</ol>
<h3>Packing list</h3>
<ul>
<li>Clothes
<ul>
<li>T-shirts</li>
<li>Jumper</li>
</ul>
</li>
<li>Toothbrush</li>
</ul>Line-by-line explanation
- Line 2
reversedcounts down: 3, 2, 1. - Lines 10 to 15A nested
<ul>sits inside the "Clothes"<li>, before its closing tag.
A mini glossary with a description list
<dl>
<dt>Bug</dt>
<dd>A mistake in code that makes it behave unexpectedly.</dd>
<dt>Debugging</dt>
<dd>The art of finding and fixing bugs.</dd>
</dl>Line-by-line explanation
- Line 2
<dt>is the term. - Line 3
<dd>is its description, indented by default.
Common HTML Lists Mistakes
Putting text straight inside ul
<ul>
Milk
<li>Bread</li>
</ul><ul>
<li>Milk</li>
<li>Bread</li>
</ul>The only direct children of <ul> and <ol> should be <li> elements.
Nesting the sub-list outside the li
<ul>
<li>Fruit</li>
<ul><li>Apple</li></ul>
</ul><ul>
<li>Fruit
<ul><li>Apple</li></ul>
</li>
</ul>A nested list belongs inside the item it describes.
HTML Lists in Real Projects
Lists in real interfaces
Navigation bars, footer link groups, breadcrumb trails, product feature lists, comment threads and step-by-step checkouts are all lists under the hood. Using real list elements tells screen readers "this is a list of 5 items", which helps people understand the page quickly.
HTML Lists Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Make this a numbered list of steps.
<>
<>Plug in the kettle</li>
<li>Boil the water</li>
</ol><ol> numbers the items; each item is an <li>.Which list should you use for the steps to assemble a bookshelf?
How do you make an ordered list start at 10?
start attribute sets the first number.The sub-list of planets should be nested inside the "Inner planets" item, and "Mars" is missing its <li>. Fix it.
<ul>
<li>Inner planets</li>
<ul>
<li>Mercury</li>
<li>Venus</li>
Mars
</ul>
<li>Outer planets</li>
</ul>- The nested list is inside an li
- The nested list has 3 items
- "Mars" is in an li
- The outer list has 2 items
<li> it belongs to, and every item needs its own <li>.</li> of "Inner planets" to after the nested </ul>.HTML Lists Quiz
3 questions to check what you learned.
What does
<li>stand for?- line
- list item
- link
- list index
Which attribute makes an ordered list count down?
downstart="-1"reversedorder="desc"
Which elements make up a description list?
<ul>,<li><dl>,<li><desc>,<term><dl>,<dt>,<dd>
HTML Lists Challenge
Your weekend plan
Build:
- An
<h2>"Weekend plan" - An ordered list with at least 3 activities in order
- A nested unordered list inside one of the items, with at least 2 things to bring
- There's an h2 "Weekend plan"
- Ordered list has 3+ top-level items
- A ul is nested inside an ol item
- The nested list has 2+ items
<ul> inside an <li>, before that </li>.