HTML Lists

Basic

A surprising amount of the web is secretly a list. Menus, breadcrumbs, search results, recipe steps, comment threads, settings panels: all lists with different styling. When you mark content up as a list, the browser hands that structure to assistive technology, which can then announce how many items there are and let the reader skip past the whole group in one keystroke.

<ul>
  <?>HTML</li>
</ul>

HTML gives you three kinds of list, and the difference between them is about meaning, not appearance. Choose by answering one question: would shuffling the items change the message?

The specification, translated

The HTML Standard defines the three list elements by what their relationships mean, not by the marker the browser paints. A <ul> is for items whose order is not important; an <ol> is for items whose intentional order affects the meaning; a <dl> groups names with their associated descriptions or values.

The <li> element gets its list-item relationship from its parent. Put it directly under a <ul> or <ol> when it is an item of that list. A nested list belongs inside an <li>, which makes the nesting part of the document structure rather than a visual trick.

The browser may number, bullet, indent, or otherwise style these structures by default, but those markers are presentation. CSS can change the appearance without changing whether the document contains an unordered list, ordered list, or description list. That is why choosing the right element starts with meaning, not appearance.

For a description list, think “name → associated value or description,” not “a fancy bullet list.” The specification allows groups such as terms and definitions, questions and answers, or other name-value relationships.

?

Unordered lists: a group of equals

The <ul> element holds items whose order carries no meaning. Toppings on a menu, tags on an article, links in a footer: any order works. Each item is an <li>, and browsers render a bullet by default, a detail you can restyle or remove entirely with CSS.

1
2
3
4
5
6

<ul>
  <li>Stone-milled flour</li>
  <li>Sea salt</li>
  <li>Water</li>
  <li>A patient starter</li>
</ul>

Ordered lists: sequence is the point

The <ol> element is for steps where the order matters. Baking instructions, checkout progress, terms of a contract: rearrange the items and the content becomes wrong, not just different. The default numbering exists for the reader's benefit, and it stays meaningful even when CSS replaces it with progress bars or checkboxes.

1
2
3
4
5
6

<ol>
  <li>Mix the flour and water.</li>
  <li>Let the starter work overnight.</li>
  <li>Shape the loaf and let it rise again.</li>
  <li>Bake under steam for 40 minutes.</li>
</ol>

Nesting lists inside lists

A list item can contain another list, which is how outlines, multi-level menus, and category trees are written. The nested <ul> goes inside the <li> it belongs to, never directly inside the parent list. That one detail is the difference between a real outline and a pile of indentation that screen readers cannot follow.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Flatbread</li>
    </ul>
  </li>
  <li>Pastries
    <ul>
      <li>Croissants</li>
      <li>Bagels</li>
    </ul>
  </li>
</ul>

Screen readers announce nesting depth as they go, so a properly nested menu can be explored one level at a time. Break the nesting rule and that announcement degrades into a flat run of items with no warning that a new level began.

Description lists: terms and their meanings

The third kind of list pairs each term with one or more descriptions. It is written with <dl> wrapping groups of <dt> terms and <dd> descriptions. This is the right tool for glossaries, specification-style property lists, and any metadata block where a label explains a value.

1
2
3
4
5
6
7
8

<dl>
  <dt>Hydration</dt>
  <dd>The ratio of water to flour by weight.</dd>
  <dt>Autolyse</dt>
  <dd>A rest period that lets flour fully absorb water.</dd>
  <dt>Crumb</dt>
  <dd>The pattern of holes inside a finished loaf.</dd>
</dl>

One term may legitimately have several descriptions, and one description may serve several terms before it. Most other combinations confuse parsers, so keep the term first, its descriptions after it, and close each group before starting the next.

The list behind the navigation

Site navigation is the most common list on the web, and it deserves real list markup even when design hides every trace of it. A navbar is a group of links, which is exactly what a <ul> of anchors inside a <nav> says out loud.

Notice the CSS work: list-style: none and padding: 0 strip the default look so the list can become a horizontal bar of links. The list is still there underneath, still announced as a list with three items. Restyling is presentation; removing the markup would have removed meaning to get the same look.

Mistakes worth avoiding

• Fake lists built from <div> rows with bullet characters typed in. The dots are visible, the grouping is not.

• Line breaks standing in for items: several lines ending in <br> look like a list and behave like one long paragraph to assistive technology.

• Nesting a <ul> directly inside another <ul>. The inner list must sit inside an <li> of the outer one.

• Using an ordered list purely for its numbering when the sequence carries no meaning, then fighting the semantics in every stylesheet.

• Wrapping whole navigation bars in a single link and styling the <li> elements as if they were the links.

Quick check

If you can say which of the three list types a menu of search results should be, explain where a nested list belongs, and recognize a description list in the wild, you have this lesson. When you are ready, take the HTML Lists quiz.