Optgroup HTML

by

HTML <optgroup> Tag

Within an HTML <select> element, we can group related <options> in a drop-down list, using the HTML <optgroup> tag. Thus it provides easy access to the dropdown list, especially for a list with a large number of options.

Syntax:

<optgroup label=" ">........</optgroup>

Example:

<!DOCTYPE html>
<html>
<body>
<h3> Select an Option:</h3>
<select>
  <optgroup label="Fruits">
    <option value="Apple">Apple</option>
    <option value="Mango">Mango</option>
  </optgroup>
  <optgroup label="Flowers">
    <option value="Lily">Lily</option>
    <option value="Rose">Rose</option>
  </optgroup>
</select>
</body>
</html>

Explanation:

In the above example, we are using the HTML <optgroup> tag to group similar options in a drop-down menu.

Tag-specific attributes:

Attribute Value Uses
disabled disabled Used to disable the options of an optgroup.
label text Used to define the label for an option group. It is a mandatory attribute.

Global attributes:

The HTML global attributes are supported by the HTML <optgroup> tag.

Event attributes:

The HTML event attributes are supported by the HTML <optgroup> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.