Lists

What you'll learn

How to build bulleted lists, numbered lists, and lists inside lists.

Why it matters

Menus, steps, shopping carts and navigation bars are all lists. HTML has proper tags for them so that browsers and screen readers know "these items belong together".

Explanation

There are two main list tags:

• <ul>: an unordered list (bullets). Order does not matter.
• <ol>: an ordered list (numbers). Order matters.

Each item inside either one is an <li> (list item). Only <li> tags should sit directly inside a <ul> or <ol>.

To nest a list, put a new <ul> or <ol> inside an <li>.

Example

Step-by-step walkthrough

1. The first <ul> has three <li> items, shown with bullets.
2. The third item, "Fruit", contains its own <ul>. The browser indents it.
3. The <ol> numbers its items 1, 2, 3 automatically.
4. If you add a step in the middle, the numbers update by themselves.

Try it yourself

Make a numbered list of your morning routine, then add a nested bulleted list under one step.

Build a listHTML / CSS

Editable code<h2>Make tea</h2> <ol> <li>Boil water</li> <li>Add tea bag</li> <li>Pour water</li> </ol>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Typing numbers yourself like <p>1. Boil water</p>. Use <ol> and <li>.
• Putting text directly inside <ul> without an <li>.
• Closing the parent <li> too early when nesting. The nested list belongs inside the item.
• Using lists only for indentation. Use CSS for spacing.

Quick quiz

Summary

• <ul> is bullets, <ol> is numbers, <li> is each item.
• Nest a list inside an <li> to make sub-items.
• Let the browser number items for you.

You finished the HTML beginner section. Next up in the full course: tables and forms.

<h2>Shopping</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
</ul>

<h2>Make tea</h2>
<ol>
  <li>Boil water</li>
  <li>Add tea bag</li>
  <li>Pour water</li>
</ol>