HTML <optgroup> tag

Updated: 10/11/2017 by Computer Hope

HTML optgroup tagWhen 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, as well as related attributes and browser compatibility.

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

Example 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 will appear. 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, as well as a description of each.

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

Compatibility

Internet Explorer Firefox Safari Opera Chrome
All versions All versions All versions All versions All versions

Additional form elements

Browser, Compatibility, Web design terms