The simple, perfectly valid and accessible solution is to use the
<optgroup> element. It’s used for grouping
<option> elements in a
<select> list into sections. It’s perfectly safe to use since it’s supported across all browsers.
Here’s an example of how to create a sectioned select list with pets.
<label for="pets">Pets</label> <select> <optgroup label="Dogs"> <option>Golden Retriever</option> <option>Doberman</option> </optgroup> <optgroup label="Cats"> <option>Burma</option> <option>Siamese</option> </optgroup> </select>
This code will result in this select list:
There’s one big additional benefit and that is that the labels in the list are not clickable and can therefor not be selected by mistake.
So the next time you want to create a select list with sections, look for