<optgroup>

<optgroup> groups related options within a select. Give each group a label; ordinary group captions are not selectable options.

A working example

<label for="lesson">Choose a lesson</label
><select id="lesson" name="lesson">
  <optgroup label="HTML">
    <option value="headings">Headings</option>
    <option value="forms">Forms</option>
  </optgroup>
  <optgroup label="CSS">
    <option value="grid">Grid</option>
    <option value="flex">Flexbox</option>
  </optgroup>
</select>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

Use it in a form

Use groups when they reduce scanning effort in a longer choice list. The select still needs its own label. disabled on the optgroup disables its options.

Common mistakes and accessibility

Do not nest optgroups. Keep conventional child content to options. A legend can caption a group in newer customizable select implementations, but that feature needs its own browser support check.

Continue with select for the related behavior.

Sources and browser support

MDN: optgroup describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.