<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>

    <option>-- Your Favourite Animal --</option>
    <optgroup label="Birds">
      <option>Blue Jay</option>
    <optgroup label="Sea Creatures">
    <optgroup label="Mammals">

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;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.