HTML Lists: Ordered (ol), Unordered (ul) and Nested Lists

Lists group related items. HTML has two main kinds: unordered lists, where order does not matter, and ordered lists, where it does.

Unordered lists: ul#

Use <ul> for items in no particular order. Each item is an <li> (list item). Browsers show bullets:

<p>Packing list:</p>
<ul>
  <li>Water bottle</li>
  <li>Umbrella</li>
  <li>Phone charger</li>
</ul>

Ordered lists: ol#

Use <ol> when the order matters, such as steps or rankings. Browsers number the items automatically:

<p>How to make tea:</p>
<ol>
  <li>Boil water.</li>
  <li>Add tea leaves and sugar.</li>
  <li>Add milk and simmer for two minutes.</li>
</ol>

If you add, remove or reorder items, the numbers update automatically.

Changing the numbering#

<ol start="5">
  <li>Fifth</li>
  <li>Sixth</li>
</ol>

<ol reversed>
  <li>Bronze</li>
  <li>Silver</li>
  <li>Gold</li>
</ol>

<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>

You can also set value on a single <li> to change its number.

Nested lists#

A list can contain another list. Put the inner list inside an <li>, after the item's text:

<ul>
  <li>Fruits
    <ul>
      <li>Mango</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ol>
      <li>Carrot</li>
      <li>Spinach</li>
    </ol>
  </li>
</ul>

Browsers change the bullet style for each nesting level.

Lists for navigation#

A website's main menu is a list of links, so it is usually marked up as one, inside a <nav> element:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

With CSS, the bullets are removed and the items are laid out in a row. Screen readers announce "list, 3 items", which tells users how big the menu is.

Styling note#

To change bullets or numbering style, use CSS, for example list-style-type: square;, rather than adding characters such as "•" or "1." to the text yourself.

Common mistakes#

Practice#

<ol>
  <li>Take two slices of bread.</li>
  <li>Add fillings:
    <ul>
      <li>Cucumber</li>
      <li>Tomato</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Close the sandwich and cut it in half.</li>
</ol>

Key takeaway#