Skip to: content, navigation

by Ian Lloyd

optgroup (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full
<optgroup label="string">
</optgroup>

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>
Type
block-level element
Contains
option
Contained by
select

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.

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

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

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

In this Section

Related Reading

User-contributed notes

ID:
#2
Date:
Thu, 05 Jun 2008 12:02:07 GMT
Contributed by:
msberryuk

I was considering nesting option groups in order to create a multi-level hierarchy in my select list, decided to read the W3C HTML 4.01 standard just to check this was permissible, but believe its not.

Not sure its clear from the description that for valid mark-up this can only provide a single sub-level.

If you do attempt it, a quick test I just ran in IE7 and FF2 shows that they will close any outer optgroups before starting a new one - essentially reverting to the standard.

Hope its all helpful.

ID:
#1
Date:
Fri, 28 Mar 2008 11:33:39 GMT
Contributed by:
AutisticCuckoo

Option groups may be more useful in list boxes (SELECT elements with SIZE>1) than in drop-down lists (SELECT element with SIZE=1).

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters