HTML Lists

Lists are everywhere on the web: navigation menus, recipes, feature lists, steps in a tutorial. HTML gives you two everyday kinds. The ul tag makes a bulleted list, and the ol tag makes a numbered list. Both work the same way, with every item wrapped in an li tag.

You never type the bullet or the number yourself. The browser adds them, which is more useful than it sounds. Add an item to the middle of a numbered list and every number after it updates. Remove one and the list renumbers itself. The browser does the counting, so your content stays correct.

Pick the list type by meaning. Use ul when the order does not matter, like ingredients or features. Use ol when the sequence counts, like steps or rankings. The wrong choice confuses readers who expect a numbered order. A third tag, dl, makes definition lists of terms and descriptions, but you will use it far less.

Nested lists

Lists can live inside lists. Put a second ul or ol inside an li tag and you get an indented sub-list under its parent item. This is how dropdown menus and multi-level outlines are built. Keep the nesting shallow, because every extra level makes the structure harder to follow.

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Controlling the markers

The type attribute changes the markers. Ordered lists accept 1, A, a, I, and i for different numbering styles, and unordered lists accept disc, circle, and square. CSS offers finer control with the list-style property, but the default bullet serves most pages well.

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

Syntax

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ul><li><div class="card">content</div></li></ul> // not <ul><div><li>