HTML <optgroup> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <optgroup> tag is used within a <select> element to group related <option> elements together under a common label. It improves the structure, readability, and usability of long or complex dropdown lists by visually separating options into meaningful categories.

Instead of presenting users with one long, flat list of options, <optgroup> allows developers to organize choices into logical sections. This is especially useful when dealing with large datasets such as country lists, product categories, time zones, or grouped settings.

Each group is displayed with a visible label that describes the category it represents. While the label itself cannot be selected as a value, it helps users quickly scan and understand the available choices. The grouped options remain fully selectable and behave the same as standard <option> elements.

From an accessibility perspective, <optgroup> also helps assistive technologies convey contextual structure, making form controls easier to navigate for screen reader users.

The <optgroup> element must be placed directly inside a <select> element and can contain one or more <option> elements. Multiple <optgroup> elements can be used within the same <select> to create multiple groupings.

Properties

Permitted Parents: A <select> element
Content: One or more <option> elements
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<select>

  <optgroup label="Fruits">

    <option value="banana">Banana</option>

    <option value="orange">Orange</option>

    <option value="apple">Apple</option>

  </optgroup>

  <optgroup label="Vegetables">

    <option value="carrot">Carrot</option>

    <option value="tomato">Tomato</option>

    <option value="onion">Onion</option>

  </optgroup>

</select>

Result

Editor

Attributes

label: Specifies a label for the option group.
disabled: Disables the input control. The button won’t accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

Global Attributes

The <optgroup> tag also supports the Global Attributes in HTML5

Event Attributes

The <optgroup> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <optgroup> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.