HTML - <optgroup> Tag

HTML <optgroup> is used in the <select> element to group together relevant <option> elements. It offers a method for setting up and structuring the choices in a dropdown list. This can be very helpful when you wish to organize and improve user experience by categorizing a big list of options into parts or categories.

Syntax

<optgroup label= "..."></optgroup>

Attribute

HTML optgroup tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
disabled	disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
label	text	Defines a label to use when using <optgroup>.

Examples of HTML optgroup Tag

Bellow examples will illustrate the usage of optgroup tag. Where, when and how to use it to create optgroup and how we can style that optgroup using CSS.

Creating Optgroup Element

In the following program, we are using the HTML <optgroup> tag to create a single group of options with the "select" element in an HTML.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <optgroup label='Fruits'>
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
         <option value="orange">Orange</option>
         <option value="grapes">Grapes</option>
      </optgroup>
   </select>
</body>
</html>

Nested Option in Optgroup

Following is another example of the HTML <optgroup> tag. Here, we are using the <optgroup> tag to create multiple groups of options within the "select" element in an HTML.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='States'>
         <option value="uttarpradesh">Uttar Pradesh</option>
         <option value="punjab">Punjab</option>
         <option value="bihar">Bihar</option>
         <option value="jharkhand">Jharkhand</option>
      </optgroup>
      <optgroup label='Related Cities'>
         <option value="lucknow">Lucknow</option>
         <option value="jalandhar">Jalandhar</option>
         <option value="patna">Patna</option>
         <option value="ranchi">Ranchi</option>
      </optgroup>
   </select>
</body>
</html>

Disable Particular Optgroup

In this example, we are using the HTML <optgroup> to create a grouping option within the "select" element in an HTML. We use the "disabled" attribute to disable the created group.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Group 1'>
         <option value="opt1.1">Option 1.1</option>
         <option value="opt1.2">Option 1.2</option>
      </optgroup>
      <optgroup label='Group 2'>
         <option value="opt2.1">Option 2.1</option>
         <option value="opt2.2">Option 2.2</option>
         </optgroup>
         <optgroup label='Group 3' disabled>
         <option value="opt3.1">Option 3.1</option>
         <option value="opt3.2">Option 3.2</option>
      </optgroup>
   </select>
</body>
</html>

Styling Optgroup

Following is the example, where we are creating a grouping of options within the "select" element using the HTML <optgroup> tag in an HTML. We use CSS to style the "optgroup".

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
   <style>
      optgroup {
         color: green;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Frontend'>
         <option value="html">HTML</option>
         <option value="css">CSS</option>
         <option value="javascript">JavaScript</option>
      </optgroup>
         <optgroup label='Backend'>
         <option value="java">Java</option>
         <option value="php.2">PHP</option>
      </optgroup>
   </select>
</body>
</html>

Supported Browsers

Tag
optgroup	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm