Lists

Lists are one of the most common ways to structure grouped content — navigation menus, steps in a process, FAQs, and more are usually built on top of a list element under the hood.

Unordered lists

Use <ul> when the order of items doesn't matter:

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

Each item goes inside an <li> (list item). Browsers render <ul> items with bullet points by default.

Ordered lists

Use <ol> when sequence matters — steps, rankings, instructions:

<ol>
  <li>Preheat the oven to 350°F.</li>
  <li>Mix the dry ingredients.</li>
  <li>Fold in the wet ingredients.</li>
  <li>Bake for 25 minutes.</li>
</ol>

<ol> renders items with numbers by default. You can change the starting number with the start attribute, or reverse the count with reversed:

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

Description lists

Less common, but useful for term/definition pairs — glossaries, metadata, key-value pairs:

<dl>
  <dt>HTML</dt>
  <dd>The markup language used to structure web pages.</dd>

  <dt>CSS</dt>
  <dd>The language used to style HTML.</dd>
</dl>

<dt> is the term, <dd> is its description. A single term can have multiple <dd> entries.

Nesting lists

Lists can nest inside a list item to build a hierarchy:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

The nested <ul> goes inside the <li> it belongs to, not as a sibling of it — that's what tells the browser (and a screen reader) that "Frontend" is the parent of that sub-list.