Skip to content

Lists

Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.

Use list elements (ol, ul, dl and menu elements) for list content.

This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements.

Ordered list

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

html
<ol>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

Unordered list

The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.

html
<ul>
  <li>Milk</li>
  <li>Cheese</li>
  <li>Bread</li>
</ul>

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

html
<menu>
  <li><button>Save for later</button></li>
  <li><button>Share this news</button></li>
</menu>