optgroup (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<optgroup label="string">
</optgroup>

Description

In longer select lists, it may be beneficial to subgroup related items in much the same way as you might organize list content by nesting those lists. You effectively create a series of categories, and items that fit into each category. The optgroup element allows you to do this in select lists, helping to visually clarify the organization of list items, although browsers use a range of different visual styles to indicate related groups of options, as Figure 1 shows.

Figure 1. Optgroups rendered in IE (Windows), Firefox, Opera, and IE5.2 Mac Optgroups as shown in Firefox, IE (Windows), Opera and IE5.2 (Mac)

Note that optgroup is only used to identify related items visually. It contains no useful data, nor can users click on an option group as they could an individual option. Note that it is not possible to nest several optgroup elements inside a parent optgroup. The optgroup may be used with simple drop-down lists (as in a select with a size of "1" or with no size specified, which would render as shown in the example) and with list boxes (select elements with a size greater than "1").

Example

In this select list, food types are grouped together with optgroup elements:

<form>
  <select name="favoritefood">
    <optgroup label="Dairy products">
      <option>Cheese</option>
      <option>Egg</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option>Cabbage</option>
      <option>Lettuce</option>
      <option>Beans</option>
      <option>Onions</option>
      <option>Courgettes</option>
    </optgroup>
    ⋮
  </select>
</form>

Use This For …

This element is used to group related items as a means to enhance the clarity of information presented to the user.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

User-contributed notes

ID:
#4
Contributed:
by blonkm
Date:
Mon, 12 Oct 2009 15:40:34 GMT

When scripting optgroup styling in IE (6,7,8) be very careful. I had to change the color of the optgroup, and had to resort to also change the color of the select itself, or the optgroup would not redraw itself.

Related Products