Learn HTML

HTML: option tag

HTML: <option> tag

In this series of learning HTML, we will teach you how to use the HTML option tag with proper syntax and lots of examples. Let’s start on the HTML option tag.

Description of HTML option tag

The HTML <option> tag is used to define an option in a dropdown list or a list box created using the <select> tag. The <option> tag must be used within the <select> element to specify the choices available to the user.

Here is an example of how the <option> tag can be used:

<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>

In this example, the <option> tag creates three options within a <select> element. The value attribute specifies the value of each option, which can be used to identify the selected option on the server side. The text between the opening and closing <option> tags specifies the text that is displayed to the user.

The <option> tag supports several other attributes to control the appearance and behavior of the option, such as:

  • disabled attribute to disable the option
  • selected attribute to pre-select the option
  • label attribute to provide a description for the option.

Overall, the <option> tag is a useful tool for creating dropdown lists and list boxes in HTML forms, and should be used to provide a set of choices to the user.


Syntax of HTML option tag

The option tag is used within a select tag in HTML to define the options in a drop-down list. The syntax of the option tag is as follows:

<option value=”value_attribute”>Option text</option>


  • value_attribute: Specifies the value associated with the option. This value is sent to the server if the form containing the select element is submitted.
  • Option text: Specifies the text that appears in the drop-down list for the option.

Both value and Option text are mandatory attributes for the option tag. Here’s an example of using the option tag:

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

This will create a drop-down list with the options “Volvo”, “Saab”, “Mercedes”, and “Audi”. When the user selects one of the options, the value of that option will be sent to the server when the form is submitted.


Global Attributes

The option tag in HTML supports various global attributes that can be used to add additional functionality and attributes to the element. These global attributes include:

  • accesskey: Specifies a shortcut key to activate/focus the element.
  • class: Specifies one or more class names for the element, which can be used for CSS styling.
  • contenteditable: Specifies whether the content of the element is editable or not.
  • dir: Specifies the direction of the element’s text, either left-to-right or right-to-left.
  • hidden: Specifies that the element should be hidden from view.
  • id: Specifies a unique identifier for the element.
  • lang: Specifies the language of the element’s content.
  • style: Specifies inline CSS styles for the element.
  • tabindex: Specifies the tab order of the element.
  • title: Specifies extra information about the element, which is typically displayed as a tooltip.
  • translate: Specifies whether the content of the element should be translated or not.

Here’s an example of using some of these attributes on an option tag:

<option value="volvo" class="car-option" hidden>Volvo</option>
<option value="saab" style="color: red;" lang="en">Saab</option>
<option value="mercedes" tabindex="2">Mercedes</option>
<option value="audi" contenteditable="true" translate="no">Audi</option>

In this example, the first option element is hidden and has a custom class name, the second option has a custom CSS style and a language specified, the third option has a custom tab order, and the fourth option has editable content and is not translated.



Event Attributes

The option tag in HTML does not have any specific event attributes that are unique to it. However, since the option tag is typically used within a select tag, it can respond to various event attributes defined on the select tag itself.

Some of the common event attributes that can be used on the select tag include:

  • onchange: Fires when the value of the select element is changed.
  • onclick: Fires when the select element is clicked.
  • onmouseover: Fires when the mouse pointer is moved over the select element.
  • onmouseout: Fires when the mouse pointer leaves the select element.

Here’s an example of using the onchange attribute on a select tag with option tags:

<select onchange="myFunction()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

function myFunction() {
alert("You selected a car!");


In this example, the myFunction function is called when the user selects an option from the drop-down list. When an option is selected, an alert box will pop up with the message “You selected a car!”.





Other Attributes

In addition to the global and event attributes, the option tag in HTML supports some specific attributes that are related to its behavior within a select element. These attributes include:

  • disabled: Specifies that the option should be disabled and cannot be selected.
  • label: Specifies a label for the option that can be displayed instead of the option text.
  • selected: Specifies that the option should be pre-selected when the select element is displayed.

Here’s an example of using these attributes on option tags:

<option value="">-- Select a car --</option>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<optgroup label="German Cars">
<option value="mercedes" disabled>Mercedes</option>
<option value="audi" selected>Audi</option>

In this example, the first option tag is used as a default option and does not have a value or label associated with it. The optgroup tags are used to group related options together and display a label for each group. The disabled attribute is used to disable the “Mercedes” option, so it cannot be selected. The selected attribute is used to pre-select the “Audi” option when the select element is displayed.

Notes on HTML option tag

Here are some important notes to keep in mind when working with the option tag in HTML:

  1. The option tag must always be used within a select tag.
  2. The value attribute of the option tag is used to specify the value of the selected option, which is sent to the server when the form is submitted.
  3. The text content of the option tag is what is displayed in the drop-down list, unless a label attribute is specified.
  4. The disabled attribute can be used to disable an option so that it cannot be selected.
  5. The selected attribute can be used to pre-select an option when the select element is displayed.
  6. The optgroup tag can be used to group related options together and display a label for each group.
  7. The option tag can support various global attributes such as class, id, and style, as well as event attributes such as onchange and onclick.
  8. When working with multiple select elements on the same page, it is important to give each element a unique id attribute so that they can be properly identified and manipulated with JavaScript.
  9. The option tag does not support any content inside the tag. All content should be specified using the value and/or label attributes.
  10. The option tag is an important element for creating forms and providing users with a selection of choices.


Browser Compatibility

The HTML option tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile



Examples of HTML option tag

We will discuss the <option> tag below, exploring examples of how to use the <option> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.






XHTML 1.0 Transitional Document



About the author