HTML <optgroup> Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The HTML <optgroup> Tag for Option Groups

Use <optgroup> to group <option> tags in HTML 5

The <optgroup> tag is used to create a group of options in a drop-down box in a <select> list. In most browsers, the option group is displayed as a hierarchy, with the form options under the optgroup label. The option group label will not be able to be selected, but the options under it will be.

The optgroup element is often used in HTML forms. It can also be used in a data list to create a list of suggestions for autocompletion in a combobox.

This is an actual working example of the <optgroup> tag example code below.

<optgroup> Tag Syntax

Rules for coding HTML `optgroup` elements

<body>
   ... flow content expected ...
   <form method="POST" action="form-handler">
      ... flow content ...
      <select>
         ...
         <optgroup label="...">
            <option>...</option>
            ...
         </optgroup>
         ...
      </select>
      ... flow content ...
   </form>
   ...
</body>

Rules for coding the HTML optgroup element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Inside a select element, include an optgroup element for each group of options in the select list.
Begin the optgroup element with a starting <optgroup> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the <optgroup> starting tag, include a label attribute with the label for the option group.
Inside the optgroup element, between the starting <optgroup> tag and the ending </optgroup> tag, code the options of the select list.
End the optgroup element with a matching </optgroup> closing tag.

optgroup Content Model

Content of the optgroup element

The content of the optgroup element consists of a list of options, each created with an <option> tag.

<optgroup> Tag Attributes

Attributes of the <optgroup> tag

global attributes	In addition to the personal attributes of the <optgroup> tag below, any of the common HTML attributes can also be coded.
`disabled="disabled"`	Sets the value of the <optgroup disabled> boolean attribute to `true`. Omitting it sets to `false`.
`label`

<optgroup> Tag Examples

Examples of the `optgroup` tag in HTML 5

Example of <optgroup>s

(see <optgroup> tag demo above)

<form method="POST" action="development-language.cgi">
   <label>Language:</label>
   <select name="language">
      <option>Select a language ...</option>
      <optgroup label="Programming Languages">
         <option>C++ / C#</option>
         <option>Java</option>
         <option>Objective-C</option>
      </optgroup>
      <optgroup label="Client-side scripting Languages">
         <option>JavaScript</option>
      </optgroup>
      <optgroup label="Server-side scripting Languages">
         <option>Perl</option>
         <option>PHP</option>
         <option>Ruby on Rails</option>
      </optgroup>
      <optgroup label="Mobile Platforms">
         <option>Android</option>
         <option>iOS (iPhone, iPad and iPod Touch)</option>
      </optgroup>
      <optgroup label="Document Markup Languages">
          <option>HTML</option>
         <option>SGML</option>
      </optgroup>
   </select>
</form>

Changes in HTML 5 - <optgroup> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the optgroup element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5