How to make lists

Choose a list type

Use an unordered list when sequence does not matter and an ordered list for steps or rankings.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>
  <li>Create the file.</li>
  <li>Open it in a browser.</li>
</ol>

Keep list structure valid

A ul or ol contains li children. Put nested lists inside the relevant list item, and keep nesting shallow.

<ul>
  <li>Fruit
    <ul><li>Mango</li><li>Banana</li></ul>
  </li>
</ul>

Describe terms

<dl>
  <dt>HTML</dt>
  <dd>The language that structures web content.</dd>
  <dt>CSS</dt>
  <dd>The language that styles web content.</dd>
</dl>

Preserve semantics

Do not imitate a list with typed hyphens, paragraph tags, or CSS-generated bullets. Real lists announce item counts and structure to assistive technology; use CSS only to change their presentation.