<optgroup> HTML Tag

Sharing is caring!

Element of
HTML Lists Tutorial: 8 Part Explainer For Beginners To Learn & Pros To Refresh
What does <optgroup> HTML Tag do?
The <optgroup> element is used to group together related <option> elements within a parent <select> drop-down list.

Code Example

<p><strong>Select your favorite species of flamingo.</strong></p>

     <optgroup label="Favorites A-C">
          <option value="American">American flamingo</option>
          <option value="Andean">Andean flamingo</option>
          <option value="Chilean">Chilean flamingo</option>
     <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>

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.

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for optgroup