HTML <optgroup> tag

When writing in HTML (hypertext markup language), 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.

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

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

All HTML tags support standard attributes that define the settings of an HTML element. In addition to the standard settings, the <optgroup> tag has the following unique attributes.

Compatibility

Additional form elements

• <button>
• <datalist>
• <fieldset>
• <input>
• <keygen>
• <label>
• <legend>
• <option>
• <output>
• <select>
• <textarea>

Browser, Compatibility, Container tag, Web design terms