HTML <optgroup> Tag

What You’ll Learn

The <optgroup> tag structures select menus by grouping related options. This guide covers syntax, the label attribute, common form patterns, and accessibility for beginners.

What Is the <optgroup> Tag?

The <optgroup> tag is an HTML element designed for use within <select> elements. It groups related <option> elements together, providing a hierarchical structure within a dropdown list.

📝 Syntax

Place <optgroup> inside <select> and nest <option> elements inside each group:

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </optgroup>
</select>

Syntax Rules

• Parent must be a select element.
• Children must be option elements (not other optgroups).
• label attribute is required and defines the group heading.
• Options outside any optgroup are still valid for ungrouped items.

⚖️ Grouped vs Flat <select>

Examples Gallery

Categorize dropdown options and improve form usability with labeled option groups.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

♿ Accessibility

• Label the select — Use <label for="id"> on the parent select, not on optgroup.
• Group labels — The label attribute is exposed to assistive technology as a group name.
• Meaningful option text — Each option should describe the choice clearly.
• Avoid huge lists — Even with groups, consider autocomplete patterns for 50+ items.

💡 Best Practices