HTML <optgroup> Tag

✂

<select name="Food">
<optgroup label="Fruit">
<option value ="apples">Apples</option>
<option value ="bananas">Bananas</option>
<option value ="oranges">Oranges</option>
</optgroup>
<optgroup label="Vegetables">
<option value ="cabbage">Cabbage</option>
<option value ="carrots">Carrots</option>
<option value ="potatoes">Potatoes</option>
</optgroup>
<optgroup label="Meat">
<option value ="beef">Beef</option>
<option value ="chicken">Chicken</option>
<option value ="pork">Pork</option>
</optgroup>
</select>

The above example demonstrates usage of the <optgroup> element.

The <optgroup> element represents a group of <option> elements with a common label. It is used to separate <option> elements into logical groups. This can make it easier for users when choosing from a large list of options within a <select> list.

The label attribute must be specified when using the <optgroup> element. This attribute is what provides the name of the group within the browser.

You can also (optionally) use the disabled attribute to disable an optgroup.