Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <outgroup> tag.

Use of <optgroup> tag

The <optgroup> tag is used to group related <option> elements of a drop down list within <select> element.

Display:Inline

Example of <optgroup> tag

    <select>
       <optgroup label="Ladies">
          <option value="jack"> Jack </option>
          <option value="johnson"> Johnson </option>
       </optgroup>
    </select>

Supported Browsers.

Tag
<optgroup> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h4> Top 3 position list of example school </h4>
<select>
<optgroup label="Class-I">
<option value="chaoba"> Chaoba </option>
<option value="tomba"> Tomba </option>
<option value="jackson"> Jackson </option>
</optgroup>
<optgroup label="Class-II">
<option value="mahesh"> Mahesh </option>
<option value="tom"> Tom </option>
<option value="ling"> Ling </option>
</optgroup>
<optgroup label="Class-III">
<option value="kesho"> Kesho </option>
<option value="roshan"> Roshan </option>
<option value="abishek"> Abishek </option>
</optgroup>
<optgroup label="Class-IV">
<option value="angelina"> Anjelina </option>
<option value="marry"> Marry </option>
<option value="tian"> Tian </option>
</optgroup>
<optgroup label="Class-V">
<option value="champion"> Champion </option>
<option value="modhu"> Modhu </option>
<option value="jack"> Jack </option>
</optgroup>
</select>
</body>
</html>

Output

Top 3 position list of example school

The <optgroup> element helps in drop-down long lists content having many option values such that related options are placed within one <optgroup> element.
Suppose, you have a website for your big hotel.

In the following way, you make a drop-down lists of the items available in your hotel such as


Attributes of <optgroup> tag


Attribute Value Notes
disabled disabled It makes the <optgroup> element disabled(including all its option value).
label text It defines a label for the <optgroup> element.