HTML <optgroup> Tag

Topic: HTML5 Tags Reference« Prev|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:

HTML / XHTML: <optgroup label="text"> ... </optgroup>

The example below shows the <optgroup> tag in action.

  • <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.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 6+
  • Apple Safari 1+
  • Opera 7+

Further Reading

See tutorial on: HTML Forms.

Other form-related tags: <form>, <fieldset>, <legend>, <label>, <input>, <textarea>, <select>, <option>, <button>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.