Description

The <optgroup> tag defines a group of options within a dropdown list defined by the <select> element. Each option offered by the dropdown list is defined by an <option> tag. A <select> element must contain at least one <option> element.

The following table summarizes the usages context and the version history of this tag.

Parent:<select>
Content:One or more <option> elements
Start/ End Tag:Start tag: required, End tag: required
Version:HTML 4, 4.01, 5

Note: The <optgroup> elements may not be nested. This element should occur only within the context of a <select> element.

Syntax

The basic syntax of the <optgroup> tag is given with:

HTML/XHTML: <optgroup value="5"> ... </optgroup>

The example below shows the <optgroup> tag in action.

<select>
    <optgroup label="Sports cars">
        <option value="ferrari">Ferrari</option>
        <option value="lamborghini">Lamborghini</option>
    </optgroup>
    <optgroup label="Luxury cars">
        <option value="mercedes">Mercedes</option>
        <option value="bentley">Bentley</option>
    </optgroup>
</select>

Tip: Grouping of related options is particularly helpful when the user have to choose from a long list of options; groups of related options are easier to grasp and access, than a single long list of options.

Tag-Specific Attributes

The following table shows the attributes that are specific to the <optgroup> tag.

Global Attributes

Like all other HTML tags, the <optgroup> tag supports the global attributes in HTML5.

Event Attributes

The <optgroup> tag also supports the event attributes in HTML5.

Browser Compatibility

Element
<optgroup>YesYesYesYesYes