HTML <optgroup> tag

Updated: 11/13/2018 by Computer Hope
HTML optgroup tag

When writing in HTML, the <optgroup> tag is used to group together related options within a <datalist> or <select> element. These options can be selected using a drop-down menu, or via autocomplete if the user starts typing one of them. The following sections contain information about the <optgroup> tag, including an example of it in use, and related attributes and browser compatibility.

Note

The <optgroup> tag belongs to a group of tags called form elements.

Example of <optgroup> code

<select>
<optgroup label="Mammals">
<option>Cat</option>
<option>Dog</option>
</optgroup>
<optgroup label="Birds">
<option>Crow</option>
<option>Eagle</option>
</optgroup>
<optgroup label="Dinosaurs">
<option>Raptor</option>
<option>Tyrannosaurus</option>
<option>Brachiosaurus</option>
</optgroup>
</select>

Example result

Choose your favorite animal from this list:


If you hover your mouse cursor over the right side of the box, a down arrow appears. Click this arrow to choose your favorite animal.

Attributes

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair, with all tags supporting standard attributes. The following table shows all of the current unique HTML attributes for the <optgroup> tag, and a description of each.

Attribute Description
disabled Disables the option-group.
label Designates a short label for an option-group.

Compatibility

Edge Internet Explorer Firefox Safari Opera Chrome
All versions 5.5+ All versions All versions All versions All versions

Additional form elements

Browser, Compatibility, Web design terms