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.

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.

HTML optgroup Tag Video

Watch our video on HTML optgroup Tag.

HTML anchor Tag HTML abbr Tag HTML acronym Tag HTML address Tag HTML applet Tag HTML area Tag HTML article Tag HTML aside Tag HTML audio Tag HTML b Tag HTML base Tag HTML basefont Tag HTML bdi Tag HTML bdo Tag HTML big Tag HTML blockquote Tag HTML body Tag HTML br Tag HTML Button Tag HTML Canvas Tag HTML Caption Tag HTML Center Tag HTML Cite Tag HTML Code Tag HTML Col Tag HTML colgroup Tag HTML comment Tag HTML data Tag HTML datalist Tag HTML dd Tag HTML del Tag HTML details Tag HTML dfn Tag HTML dialog Tag HTML dir Tag HTML div Tag HTML dl Tag HTML Doctype Tag HTML dt Tag HTML em Tag HTML embed Tag HTML fieldset Tag HTML figcaption Tag HTML figure Tag HTML font Tag HTML footer Tag HTML form Tag HTML frame Tag HTML frameset Tag HTML Heading Tags HTML head Tag HTML header Tag HTML hr Tag HTML html Tag HTML i Tag HTML iframe Tag HTML img Tag HTML input Tag HTML ins Tag HTML kbd Tag HTML label Tag HTML legend Tag HTML li Tag HTML link Tag HTML main Tag HTML map Tag HTML mark Tag HTML meta Tag HTML meter Tag HTML nav Tag HTML noframes Tag HTML noscript Tag HTML object Tag HTML ol Tag HTML optgroup Tag HTML option Tag HTML output Tag HTML p Tag HTML param Tag HTML picture Tag HTML pre Tag HTML progress Tag HTML q Tag HTML rp Tag HTML rt Tag HTML ruby Tag HTML s Tag