|
HTML Tip:
Sorting With The OPTGROUP Element
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Until recently, the OPTGROUP element belonged to that lonely category of valid HTML tags that most major browsers didn't recognize. Fortunately, Netscape 6.x and Explorer 6.0 for Windows have joined Explorer 5.0/Mac in supporting this handy way to categorize SELECT lists. Use it to make your lists easier to read and understand.
Categorize Long SELECT Lists
The HTML 4.0 specification tried to increase the functionality of menus so that they could be separated into categories or displayed in a hierarchy. This is the purpose of the OPTGROUP element. It groups different OPTION tags under a common name or label.
Add it to a regular SELECT list like this:
Place the opening and closing OPTGROUP tags around the related options. In this list, we set up categories for beaches, Europe, and adventure destinations.
Browser Support
Explorer 5.x/Win, Netscape 4.x/Win, and WebTV ignore the OPTGROUP tags and labels, but still display all the options. Netscape 6.0 shows you both the options and categories.
| Explorer 5.0 for Windows |
 |
| Netscape 6.0 for Windows |
 |
Explorer 6.0 for Windows displays the OPTGROUP tag much like Netscape 6.0 example above. Still, that's not exactly what the HTML 4.x standard calls for.
Note that the whole list displays with its category titles in NS 6.0. The LABEL attribute is actually supposed to turn the SELECT list into a cascading list where you see just the category titles at first. Members of each category should display in a cascading menu when you move the mouse over the category name.
Explorer 5.0/Mac supports it fully. See the difference?
| Explorer 5.0 for Mac |
 |
Depending on your perspective, "full support" may or may not be a good thing. Some Web designers have remarked that they prefer to see all the categories and options at once instead of having to navigate to the options using their mouse. Visitors who have problems using a mouse would probably agree.
Watch Your Syntax
Some things to remember about the OPTGROUP element:
- It must be placed inside a SELECT tag.
- A closing tag is required (</OPTGROUP>).
- It can only contain OPTION statements.
|
But the most important point is that only the newest browsers support OPTGROUP. But use it anyway! Some HTML coding techniques or errors can break your page display, but OPTGROUP is low-impact. Older browsers just ignore the element and display a regular SELECT list.
Include OPTGROUP on your new pages and when you update your forms and menus. You can even combine OPTGROUP with our tip for creating colored SELECT lists to get some really impressive effects. It won't hurt you with non-compliant browsers and it's a neat effect to use with the new ones.
|
