An “optgroup” element with no child “legend” element must have a “label” attribute.

Every <optgroup> needs a name: give it a label attribute, or make a <legend> element its first child.

Browsers show the group name as a heading above the group's options, and screen readers announce it when the user moves into the group. The HTML specification requires the label attribute whenever the <optgroup> has no child <legend>. Without either one, the options sit under a blank heading and screen readers have nothing to announce.

Use the label attribute unless you have a reason not to. Every browser supports it. The validator only checks that the attribute exists, so label="" passes even though the group still has no name. Write the real group name.

The <legend> child comes from customizable select, a recent addition to HTML that lets you mark up and style the group heading. Browsers without customizable select support ignore the <legend> tag and show the group without a name. Older versions of the W3C validator reject it as well: they report the <legend> as a stray start tag and still ask for label. If you use a <legend>, keep the label attribute too. Browsers that support customizable select take the name from the <legend>, and older ones fall back to the attribute.

Invalid example

<label for="car">Car</label>
<select id="car" name="car">
  <optgroup>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
</select>

Valid example

<label for="car">Car</label>
<select id="car" name="car">
  <optgroup label="Swedish cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German cars">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
</select>

Valid example with a legend

<label for="car">Car</label>
<select id="car" name="car">
  <optgroup label="Swedish cars">
    <legend>Swedish cars</legend>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
</select>

Learn more:

MDN Reference

MDN Web Docs: The optgroup element

→

MDN Reference

MDN Web Docs: Customizable select elements

→

WHATWG Spec

HTML Living Standard: Form elements

→