HTML - <optgroup> Tag

Quiz

Introduction to <optgroup> Tag

The HTML <optgroup> tag in HTML is used to group the related options within the <select> element. It improves the readability of the drop-down lists, especially when dealing with a large number of options.

It accepts the label attribute, that provides a descriptive name for the group. This label is displayed in the drop-down menu but cannot be selected.

Syntax

Following is the syntax of HTML <optgroup> tag −

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

Attributes

HTML optgroup tag supports Global and Event attributes of HTML. It also accepts 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>.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <optgroup> tag.

<!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>

Example : Using disabled Attribute

Consider the following example, where we are going to use the disabled attribute along with the <optgroup> tag.

<!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>

Example : Applying CSS

In the following example, we are going to use the <optgroup> tag and applying the CSS properties to it.

<!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

Print Page