HTML <option> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <option> tag is used to define an individual choice within a dropdown list or selection menu. It is most commonly placed inside a <select> element, but it can also be used within a <datalist> element to provide predefined suggestions for user input.

Each <option> represents a selectable value that users can choose from. When displayed inside a dropdown list, the text between the opening and closing <option> tags is what the user sees, while the underlying value is typically submitted when a form is sent.

The <option> element helps create structured, user-friendly forms by presenting multiple choices in a compact and accessible way. It is especially useful when you want to limit user input to a predefined set of values, such as selecting a country, category, size, or preference.

When used within a <select> element, only one option can be selected by default unless the select element allows multiple selections. Inside a <datalist>, options act as suggestions rather than strict choices, allowing users to either select from the list or enter their own value.

The <option> tag also supports grouping when paired with the <optgroup> element, making long lists easier to scan and understand by visually separating related options.

Properties

Permitted Parents: A <select>, an <optgroup> or a <datalist> element
Content: Text
Start/End Tags: Start tag: optional, End tag: optional

Example

HTML

<select>

  <option value ="new york">New York</option>

  <option value ="london">London</option>

  <option value ="sydney" selected>Sydney</option>

  <option value ="auckland">Auckland</option>

</select>

Result

Editor

Attributes

selected: Specifies that this option will be pre-selected when the user first loads the page.
value: Specifies the initial value of the option item.
label: Specifies a label to be used as an alternative to the option item’s contents. Useful if you’d prefer a shorter, more concise label.
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.

Global Attributes

The <option> tag also supports the Global Attributes in HTML5

Event Attributes

The <option> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <option> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.