Module 2: Text · Lesson 4 of 8
HTML Lists: ul, ol and li Tutorial with Examples
All lessons in Module 2
Goal: Make bulleted and numbered lists.
Learn
Lists turn up everywhere, from shopping lists to recipe steps. HTML has two main kinds:
<ul>, an unordered list, shows bullets. Use it when the order does not matter, like a packing list.<ol>, an ordered list, shows numbers. Use it when the sequence counts, like recipe steps.
Each item goes in its own <li> (list item). The only element the HTML standard allows (opens in a new tab) directly inside ul or ol is li. Anything else, a heading or a paragraph, goes inside an li or outside the list.
The browser numbers an ol for you, so never type 1, 2, 3 yourself. Add a step in the middle and everything renumbers automatically. Lists can even hold other lists, as you will see in Nested Lists.
The short version
<ul>makes a bulleted list. Use it when the order of the items is free.<ol>makes a numbered list for steps that follow a set order.- Every item goes in its own
<li>, and onlylielements may sit directly insideulorol. - The browser numbers an
olfor you, so never type the numbers yourself.
Example
<h2>Morning routine</h2>
<ol>
<li>Wake up</li>
<li>Make coffee</li>
<li>Check the weather</li>
</ol>
<h2>Snacks</h2>
<ul>
<li>Apples</li>
<li>Crackers</li>
</ul>Your task
Plan a camping trip:
- Right after
What to pack, add a bulleted list with at least 3 items. - Right after
Setting up the tent, add a numbered list with at least 3 steps. - Put only
<li>elements directly inside the lists, and give every item some text.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<ol>
<li>1. Wake up</li>
<li>2. Make coffee</li>
</ol>Right
<ol>
<li>Wake up</li>
<li>Make coffee</li>
</ol>The browser already numbers each item, so typed numbers appear twice, as in 1. 1. Wake up.
Wrong
<h2>Snacks</h2>
<li>Apples</li>
<li>Crackers</li>Right
<h2>Snacks</h2>
<ul>
<li>Apples</li>
<li>Crackers</li>
</ul>List items must sit inside a ul or ol. On their own they are invalid, and screen readers won't announce a list.
Go deeper
Lists turn up all over the web, often in places you wouldn't expect. Navigation menus are almost always a <ul> of links, styled with CSS so the bullets disappear and the items sit in a row. Search results, product grids and comment threads are frequently lists too. If you build lists in a visual editor such as WYSIWYG HTML (opens in a new tab), its source view shows the ul and li tags behind every bullet.
Screen readers rely on the real markup. When a screen reader reaches a list, it announces something like "list, 5 items", so the listener knows how long it is and can skip it. Fake lists made of paragraphs that start with a dash get none of that, and fail the WCAG rule on Info and Relationships (opens in a new tab).
Search engines like lists as well. Clear <ol> steps are easy for them to understand and are sometimes shown directly in results as a numbered answer to a how-to question.
HTML has a third kind of list for pairs of terms and descriptions: <dl>, with <dt> for each term and <dd> for its description. It suits glossaries, FAQs and product details. The dl reference has an example.
Not sure which list to use? If you could shuffle the items and nothing would break, use ul. If a reader would be lost doing step 3 before step 2, use ol.
Frequently asked questions
What is the difference between ul and ol in HTML?
<ul> is an unordered list: the items could be shuffled without changing the meaning, so the browser shows bullets. <ol> is an ordered list: the sequence is part of the meaning, so the browser numbers the items. Pick by meaning. CSS can restyle the bullets and numbers, but it can't change what the list says.
How do I start a numbered list at a different number?
Add the start attribute, one of several defined for the ol element (opens in a new tab): <ol start="5"> begins at 5. Add reversed to count down, and use type="a", "A", "i" or "I" for letters or Roman numerals. To jump to a number in the middle of a list, give an item a value, like <li value="10">.
How do I remove the bullets from a list in HTML?
Use CSS: ul{list-style:none;padding-left:0}. The old type attribute on <ul> is obsolete. One catch: Safari stops announcing a list to VoiceOver users once its bullets are removed. If the list matters to them, such as a menu, add role="list" to the <ul> to keep it announced.