HTML <optgroup> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <optgroup> tag defines a group of options within a dropdown list defined by the <select> element. Each option offered by the dropdown list is defined by an <option> tag. A <select> element must contain at least one <option> element.
The following table summarizes the usages context and the version history of this tag.
| Parent: | <select> |
|---|---|
| Content: | One or more <option> elements |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | HTML 4, 4.01, 5 |
Note: The <optgroup> elements may not be nested. This element should occur only within the context of a <select> element.
Syntax
The basic syntax of the <optgroup> tag is given with:
The example below shows the <optgroup> tag in action.
Example
Try this code »<select>
<optgroup label="Sports cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Luxury cars">
<option value="mercedes">Mercedes</option>
<option value="bentley">Bentley</option>
</optgroup>
</select>Tip: Grouping of related options is particularly helpful when the user have to choose from a long list of options; groups of related options are easier to grasp and access, than a single long list of options.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <optgroup> tag.
| Attribute | Value | Description |
|---|---|---|
| Required — The following attribute must be specified on this tag for the markup to be valid. | ||
label |
text | Specifies the label for a group of options. |
| Optional — The following attributes are optional. | ||
disabled |
disabled |
This Boolean attribute indicates that the enclosed set of options is disabled i.e. none of the items in the option group is selectable. |
Global Attributes
Like all other HTML tags, the <optgroup> tag supports the global attributes in HTML5.
Event Attributes
The <optgroup> tag also supports the event attributes in HTML5.
Browser Compatibility
The <optgroup> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Forms.
Other form-related tags: <form>, <fieldset>, <legend>, <label>, <input>, <textarea>, <select>, <option>, <button>.
