HTML Ordered and Unordered Lists: ul, ol, and li Explained

HTML gives you two kinds of lists, and the choice between them comes down to one question: does the order matter? A grocery list doesn't care what order the items are in. A recipe's directions absolutely do. HTML has a tag for each case.

This is the written version of my HTML lists video, part of my HTML beginners course. It's embedded near the top.

Key Takeaways

• <ul> is an unordered list: bullet points, no sequence implied.
• <ol> is an ordered list: numbered, and the sequence matters.
• Every item in either list type, ordered or unordered, is an <li>.
• Numbering in an <ol> is automatic. Add or remove an <li> and the rest renumber themselves.
• Lists can nest: put a full <ul> or <ol> inside an <li> to create a sublist.

Unordered lists

Use <ul> when the order of the items doesn't change what they mean. A bread recipe's ingredient list is a good example: it doesn't matter whether the flour is listed before or after the yeast.

<h2>Ingredients</h2>
<ul>
  <li>3 cups flour</li>
  <li>1 packet yeast</li>
  <li>1 tsp salt</li>
  <li>1 tbsp sugar</li>
  <li>1 1/2 cups warm water</li>
  <li>2 tbsp olive oil</li>
</ul>

By default, a browser renders each <li> in a <ul> with a bullet point in front of it.

Ordered lists

Use <ol> when sequence is the point. The same recipe's directions have to happen in order:

<h2>Directions</h2>
<ol>
  <li>Dissolve the yeast in warm water and let it sit for 5 minutes.</li>
  <li>Mix in the flour, salt, and sugar.</li>
  <li>Knead the dough for 8 to 10 minutes.</li>
  <li>Let it rise for an hour, then bake.</li>
</ol>

<ol> renders each <li> with a number instead of a bullet, starting at 1 and counting up automatically. Add a fifth step in the middle and every step after it renumbers on its own; you never hand-number list items yourself.

Choosing between them

The tag you pick is a signal to a browser, a screen reader, and a search engine. <ul> tells them these items are a set with no required sequence. <ol> tells them the sequence is part of the content. A screen reader will announce an <ol> differently, often reading out the position ("item 2 of 4"), which only makes sense when order actually carries meaning.

Nesting lists

Both list types can nest inside their own <li> items, which is useful for sub-steps or sub-categories:

<ul>
  <li>Dry ingredients
    <ul>
      <li>Flour</li>
      <li>Salt</li>
      <li>Sugar</li>
    </ul>
  </li>
  <li>Wet ingredients
    <ul>
      <li>Water</li>
      <li>Olive oil</li>
    </ul>
  </li>
</ul>

The inner <ul> sits entirely inside the outer <li> it belongs to. Mixing types works too: an <ol> of directions can have a <ul> sub-list inside any given step.

Changing how a list numbers or bullets

Ordered lists don't have to use plain numbers. The type attribute switches an <ol> to letters or Roman numerals:

<ol type="a">
  <li>First</li>
  <li>Second</li>
</ol>

<ol type="i">
  <li>First</li>
  <li>Second</li>
</ol>

type="a" gives you a, b, c; type="i" gives you lowercase Roman numerals (i, ii, iii). For anything beyond a quick swap, CSS's list-style-type property gives you finer control over both <ul> and <ol> markers, including turning bullets off entirely. See MDN's list guide for the full set of options.

Where to go next

Lists show up constantly once you start building real pages: navigation menus, step-by-step instructions, FAQ sections. From here, HTML Tables covers the other major way HTML organizes structured content, for data that actually belongs in rows and columns instead of a list.

FAQ

What's the difference between ul and ol?

<ul> is an unordered list, rendered with bullets, for items where sequence doesn't matter. <ol> is an ordered list, rendered with numbers, for items where sequence does matter. Both use <li> for their individual items.

Do I have to number list items myself in an ol?

No. <ol> numbers items automatically, in order, starting at 1. Add, remove, or reorder <li> items and the numbers update on their own.

Can I put a list inside a list?

Yes. Put a full <ul> or <ol> inside an <li> to create a nested sublist. You can mix types too, an ordered list can contain an unordered sub-list, and the other way around.

How do I make an ordered list use letters instead of numbers?

Add type="a" to the <ol> tag for lowercase letters, or type="i" for lowercase Roman numerals. For more control over how markers look, use the CSS list-style-type property instead.

Does it matter which list type I use for SEO or accessibility?

Yes. Screen readers announce list type and position differently, and an <ol> communicates that sequence matters in a way a <ul> doesn't. Pick the tag that matches what the content actually is, and that signal stays accurate.