HTML optgroup Tag

HTML optgroup Tag defines a group of related options inside the select tag. Different types of options of select tag can be categorized using optgroup tag.

Table of Contents

Syntax of HTML optgroup Tag

The Syntax of HTML optgroup Tag is shown below, It has both starting tag and ending tag.


<optgroup>
</optgroup>

Usage of HTML optgroup Tag

HTML optgroup Tag is used to make categories of different types of options. For example, if you have 2 types of options you can categorize them into two groups using optgroup tag, to make things easier for the users of website.

One group of option tags will be enclosed inside one optgroup tag and the second type of option tags will be enclosed inside second optgroup tag.

Example of HTML optgroup Tag

Simple example of HTML optgroup Tag is given below.


<select name="food">
<optgroup label="Vegetables">
<option value='carrot'>Carrot</option>
<option value='onion'>Onion</option>
<option value='potato'>Potato</option>
</optgroup>
<optgroup label="Fruits">
<option value='mango'>Mango</option>
<option value='apple'>Apple</option>
<option value='orange'>Orange</option>
</optgroup>
</select>

In above example we have used optgroup tags to make two separate groups of vegetables and fruits.

label attribute is used to specify heading or label for each group of options.

Output

Output of above code is shown below.

Browser Support for HTML optgroup Tag

HTML optgroup Tag is supported by all major browsers which include Chrome, Opera, Firefox, Edge, Internet Explorer and Safari.

Global Attributes Support in HTML optgroup Tag

The HTML optgroup Tag supports all Global Attributes.

Event Attributes Support in HTML optgroup Tag

The HTML optgroup Tag supports all Event Attributes.