Understanding and Using the HTML `

Learn how to create and customize selectable items in HTML drop-down lists using the `

Understanding the HTML <option> Element

What is the <option> Element?

The HTML <option> element represents an individual selectable item within a <select> element (a drop-down list or listbox). It defines one of the choices a user can make in a select list. Each option should have a value attribute specifying the value that will be submitted if that option is selected.

Example:

HTML

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Opel</option>
</select>

The `value` Attribute

The value attribute within the <option> tag specifies the value that will be submitted to the server when the form containing the select list is submitted. While you can omit the value attribute, it's best practice to include it to ensure that the correct data is sent. If omitted, the displayed text becomes the submitted value.

Browser Support

The <option> element is widely supported across all major web browsers.

Browser Support
Chrome Yes
Firefox Yes
Internet Explorer Yes
Safari Yes
Edge Yes
Opera Yes

<option> Attributes

Attribute Value Description
disabled disabled Disables the option; users cannot select it.
label text Provides a shorter label for the option (for accessibility).
selected selected Pre-selects this option when the page loads.
value text The value submitted with the form.

The <option> element also supports standard global and event attributes.

Grouping Options (<optgroup>)

For longer lists, you can group related options together using the <optgroup> element within the <select> element.