The HTML optgroup Tag

When you need to group certain items in a dropdown list, use the <optgroup> tag. Here is a demonstration.

When you view the dropdown list, you'll see how your browser divides things up. Each browser has it's own style for dropdown lists.

Here is the source code for the demonstration. You'll see how easy it is to group items. Grouping items may be a friendly gesture for your website visitors.

<select>
<optgroup label="Trees">
   <option>Maple</option>
   <option>Oak</option>
   <option>Sycomore</option>
   <option>Magnolia</option>
</optgroup>
<optgroup label="Birds">
   <option>Robin</option>
   <option>Bluebird</option>
   <option>Oriole</option>
   <option>Meadowlark</option>
</optgroup>
</select>

Now, what if you want to include some items that are not in a group? When you do, those items will appear as they would if there were no groups at all.

See this demonstration.

When you view the dropdown list, you'll see how your browser divides things up. Each browser has its own style for dropdown lists.

Here is the source code for that second demonstration. You'll see how to have independent list items among grouped list items.

<select>
<option>I like forests.</option>
<optgroup label="Trees">
   <option>Maple</option>
   <option>Oak</option>
   <option>Sycomore</option>
   <option>Magnolia</option>
</optgroup>
<option>I like meadows.</option>
<option>I like beaches.</option>
<optgroup label="Birds">
   <option>Robin</option>
   <option>Bluebird</option>
   <option>Oriole</option>
   <option>Meadowlark</option>
</optgroup>
<option>I like cities.</option>
</select>

The option tags may have attributes like label and value just like a regular dropdown list that has no optgroup tags.

The optgroup tag allows you to group items in a dropdown list. No CSS is required. Depending on the list items and the audience, grouping items may be a friendly gesture.

(This content first appeared in Possibilities newsletter.)

Will Bontrager