HTML Lists — Show Order and Group Items

An HTML list groups several items. Use ol when the order matters, and ul when changing the order would not change the meaning. Wrap each item in li.

The short answer

Make a list with an important order

Recipe steps can give a different result if you change their order. Use ol for this kind of list. Browsers usually show a number beside each item.

<ol>
  <li>Wash the vegetables</li>
  <li>Cut the vegetables</li>
  <li>Cook them in a pot</li>
</ol>

1. Wash the vegetables
2. Cut the vegetables
3. Cook them in a pot

Make a list that can be reordered

You can change the order of shopping items without changing the message. Use ul for this kind of list. Browsers usually show a marker beside each item.

<ul>
  <li>Notebook</li>
  <li>Pen</li>
  <li>Eraser</li>
</ul>

• Notebook
• Pen
• Eraser

Put one list inside another

A list item can contain a smaller list. Put that inner list inside the parent li.

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

• Fruit
  • Apple
  • Orange
• Vegetables

Continue a sequence

Use start on ol when a list should begin at a later number, such as when a chapter continues a sequence.

<ol start="4">
  <li>Fourth item</li>
  <li>Fifth item</li>
</ol>

Add reversed to count down. Use value on one li when that item needs a different number. These attributes change the list's numbering, not only how it looks.

Keep meaning separate from appearance

Use the CSS list-style-type property to change the shape of a marker or the style of a number. Changing the marker does not change the meaning of ol: its order still matters. Choose ol or ul based on meaning, not appearance.

You do not need to type bullet marks or numbers by hand. Native ol and ul elements make the group easier for browsers and assistive technology to identify.

Common mistakes

• Choosing ol only because you want visible numbers. If changing the order does not change the meaning, use ul.
• Putting an li outside an ol or ul. Put each item inside its list.
• Putting a nested list outside its parent li. The inner list belongs inside the parent item.
• Treating a dl of terms and descriptions as the same kind of list. A description list has different rules.

Related pages

Learn how to group important navigation links with the nav element, and how headings divide content with the heading elements. For detailed rules, standards, browser behavior, and accessibility-tree observations, see the Yugien Atlas list-elements topic.