<optgroup> HTML Tag
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Element of
- Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
- What does
<optgroup> HTML Tag
do? - The <optgroup> element is used to group together related <option> elements within a parent <select> drop-down list.
- Display
- inline
- Usage
- semantic
Code Example
<p><strong>Select your favorite species of flamingo.</strong></p>
<select>
<optgroup label="Favorites A-C">
<option value="American">American flamingo</option>
<option value="Andean">Andean flamingo</option>
<option value="Chilean">Chilean flamingo</option>
</optgroup>
<optgroup label="Favorites G-L">
<option value="Greater">Greater flamingo</option>
<option value="James's">James's flamingo</option>
<option value="Lesser">Lesser flamingo</option>
</optgroup>
</select>
Select your favorite species of flamingo.
Grouping List Options
The optgroup
element is used to group options in a drop-down list, with the aim of making the list easier to navigate. The functionality essentially splits large numbers of <option>
items into small sections. Note that the label
attribute is required, and will be rendered as the first item in the section. The user cannot select the label as a choice.
Browser Support for optgroup
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
All | All | 1 | All | All | All |