<ul> vs <ol>: when order matters

The semantic test

• `<ul>` — unordered. The user wouldn't be confused if you shuffled the items. (Tags, ingredients, navigation links, features.)
• `<ol>` — ordered. Reordering would break meaning. (Steps in a recipe, race results, top-10 lists.)

<ol>
  <li>Boil water</li>
  <li>Add tea</li>
  <li>Wait 4 minutes</li>
</ol>

<ul>
  <li>Vegan</li>
  <li>Quick</li>
  <li>Cheap</li>
</ul>

Screen readers announce "ordered list, 3 items" vs "list, 3 items" — they let blind users know whether step-by-step navigation matters.

<ol> attributes worth knowing

<ol start="5">             <!-- start numbering from 5 -->
<ol reversed>              <!-- count down: 3, 2, 1 -->
<ol type="A">              <!-- A, B, C — or "a", "i", "I" -->
<ol type="1" start="42">

For "top 10" lists with custom styling, use <ol reversed start="10"> so the largest number shows first.

Nested lists

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

The nested <ul> goes INSIDE the parent <li>, not between them. Common mistake: putting it outside the <li> (which is invalid HTML).