HTML 5 <optgroup> Tag

The HTML <optgroup> tag is used for grouping related options within your select list. This makes it easier for users to comprehend the options when looking at a large list.

Example

Modify the code below, then click "Update". See below for attributes.

Source Code	Result
<select> <optgroup label="Australia"> <option value ="sydney">Sydney</option> <option value ="melbourne">Melbourne</option> </optgroup> <optgroup label="New Zealand"> <option value ="cromwell">Cromwell</option> <option value ="queenstown">Queenstown</option> </optgroup> </select>

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled="disabled").

Possible values:

• [Empty string]
• disabled

Attribute	Description
disabled	Disables the group of input controls. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
label	Specifies a label for the option group. This attribute must be specified. Its value gives the name of the group.

Global Attributes

The following attributes are standard across all HTML 5 tags.

accesskey	draggable	style
class	hidden	tabindex
contenteditable	id	title
contextmenu	lang
dir	spellcheck

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort	onerror*	onmousewheel
onblur*	onfocus*	onpause
oncanplay	onformchange	onplay
oncanplaythrough	onforminput	onplaying
onchange	oninput	onprogress
onclick	oninvalid	onratechange
oncontextmenu	onkeydown	onreadystatechange
ondblclick	onkeypress	onscroll
ondrag	onkeyup	onseeked
ondragend	onload*	onseeking
ondragenter	onloadeddata	onselect
ondragleave	onloadedmetadata	onshow
ondragover	onloadstart	onstalled
ondragstart	onmousedown	onsubmit
ondrop	onmousemove	onsuspend
ondurationchange	onmouseout	ontimeupdate
onemptied	onmouseover	onvolumechange
onended	onmouseup	onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.