html tutorial - <optgroup> Optgroup Tag in HTML - html5 - html code - html form



  • The <optgroup> tag is used to collect relevant options in a drop-down list within a <select> element.
  • Whenever we have a lengthy list of options, groups of similar options are simple to hold for a user.
  • The <optgroup> tag supports Global Attributes and Event Attributes.

Syntax for <optgroup> tag:

<optgroup label = “GroupHeading”>
 <option>option1</option>
 <option>option1</option>
</optgroup>

Sample Coding for <optgroup> tag in HTML:

Tryit<!DOCTYPE html>
<html >
    <body>
        <select>
            <optgroup label="WEB DEVELOPMENT IN WIKITECHY">
                <option value="css">CSS</option>
                <option value="html">HTML</option>
            </optgroup>
            <optgroup label="PROGRAMMING TECHNOLOGY IN WIKITECHY">
                <option value="java">JAVA</option>
                <option value="c">C</option>
            </optgroup>
        </select>
    </body>
</html>

Code Explanation for <optgroup> tag:

<optgroup> Tag Code Explanation

  1. <optgroup> tag is used to group the related contents in a drop-down list.
  2. label is an attribute, which tends to describe the title/caption for an option-group.

Output for <optgroup> tag:

<optgroup> Tag Output

  1. By clicking the dropdown list the option values is displayed in the option group.
  2. CSS, HTML, JAVA & C are the Option Values.
  3. WEB DEVELOPEMENT IN WIKITECHY & PROGRAMMING TECHNOLOGY IN WIKITECHY are the Option groups.

Attributes of <optgroup> tag:

Attribute Value HTML4 HTML5 Description
label disabled Yes Yes Describes a label for an option-group.
disabled text Yes Yes Defines if an option-group should not be shown.

Browser Support for <optgroup> tag in HTML:

Yes Yes Yes Yes Yes

Related Searches to optgroup tag in html