<main>
  <h2>Using the <code>&lt;optgroup&gt;</code> Element with the <code>label</code> Attribute</h2>

  <p>The <code>&lt;select&gt;</code> element below has categories in its options, set apart using the <code>&lt;optgroup&gt;</code> element and <code>label</code> attribute.</p>

  <select>
    <option>-- Your Favourite Animal --</option>
    <optgroup label="Birds">
      <option>Blue Jay</option>
      <option>Cardinal</option>
      <option>Hummingbird</option>
    </optgroup>
    <optgroup label="Sea Creatures">
      <option>Shark</option>
      <option>Clownfish</option>
      <option>Whale</option>
    </optgroup>
    <optgroup label="Mammals">
      <option>Lion</option>
      <option>Squirrel</option>
      <option>Quokka</option>
    </optgroup>
  </select>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}