Lists: Ordered, Unordered & Nested

Two kinds of list

Use an unordered list <ul> when order does not matter (bullets). Use an ordered list <ol> when order does matter (numbers). Each item goes in a list item <li>.

<h3>Shopping list (order does not matter)</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h3>How to make tea (order matters)</h3>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Add milk and sugar</li>
</ol>

Both lists are built the same way — a wrapper with <li> items inside — but the wrapper decides the marker. <ul> puts a bullet before each item, while <ol> adds numbers 1, 2, 3 automatically. You never type the numbers yourself; the browser counts for you.

Description lists

For pairs of terms and definitions (like a glossary), use a description list: <dl> with <dt> (term) and <dd> (description).

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

A description list pairs things up: each <dt> is a term and the <dd> right below it is that term’s description. Browsers usually indent the <dd> slightly so the term/definition pairing is easy to read — just like a dictionary or glossary.

Nested lists

You can put a list inside a list item to create sub-points. The inner <ul> goes inside the <li>, before its closing tag.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>PHP</li>
      <li>Node.js</li>
    </ul>
  </li>
</ul>

See how the inner <ul> sits inside an <li>, before that item closes. So “Frontend” is a top-level bullet, and HTML, CSS and JavaScript are sub-bullets nested under it. The browser indents the inner list further to show it belongs to its parent item.