What is the HTML <option> tag?

Introduction to the <option> tag

The <option> tag is a fundamental HTML element that defines the available choices within a dropdown list or selection menu. You will encounter it whenever you create interactive forms on your websites, whether to allow users to choose their country, preferred category, or any other option from a predefined list.

Mastering this tag is essential for any web developer looking to create professional and accessible user interfaces. If you are new to web development, our training on HTML will guide you step by step through learning all essential tags, including those related to forms.

Definition and basic syntax

What is the <option> tag?

The <option> tag represents a single option within a selection control. It is part of HTML form elements and allows you to offer choices to users. Each <option> element corresponds to an entry that users can select from the dropdown list created by the parent tag.

Here is the basic syntax for creating a selection list with multiple options:

<select name="course">
  <option value="html">HTML Course</option>
  <option value="css">CSS Course</option>
  <option value="javascript">JavaScript Course</option>
</select>

In this example, we create a dropdown menu offering three courses. Users will see the texts "HTML Course", "CSS Course" and "JavaScript Course", while the values sent to the server will be "html", "css" and "javascript" respectively.

Structure and content of the tag

The <option> tag has an opening tag <option> and a closing tag </option>. The text placed between these two tags constitutes the label visible to users in the dropdown list. This text can only contain plain text, without nested HTML tags.

<!-- Correct syntax -->
<option value="believemy">Believemy - Learning Platform</option>

<!-- Incorrect syntax (no HTML in content) -->
<option value="believemy"><strong>Believemy</strong> - Platform</option>

Attributes of the <option> tag

The value attribute

The value attribute is probably the most important attribute of the <option> tag. It defines the value that will be sent to the server when the form is submitted. This value can differ from the text displayed to users, allowing you to use short identifiers or codes while presenting understandable labels.

<select name="level">
  <option value="1">Beginner</option>
  <option value="2">Intermediate</option>
  <option value="3">Advanced</option>
  <option value="4">Expert</option>
</select>

If you omit the value attribute, the browser will automatically use the text content of the option as the value to submit.

The selected attribute

The selected attribute allows you to pre-select an option by default when the page loads. It is a boolean attribute, meaning its mere presence is enough to activate the functionality.

<select name="language">
  <option value="en" selected>English</option>
  <option value="fr">Français</option>
  <option value="es">Español</option>
  <option value="de">Deutsch</option>
</select>

In this example, the "English" option will be automatically selected when the page loads. We recommend using this attribute to define a logical default value, thus improving the user experience.

The disabled attribute

The disabled attribute allows you to disable an option, making it unselectable by users. The option remains visible but typically appears grayed out according to the browser's default styles.

<select name="subscription">
  <option value="" disabled selected>Choose your subscription</option>
  <option value="free">Free Plan</option>
  <option value="premium">Premium Plan</option>
  <option value="enterprise" disabled>Enterprise Plan (coming soon)</option>
</select>

This technique is very useful for creating instruction text in the first position ("Choose...") or for indicating temporarily unavailable options.

The label attribute

The label attribute allows you to define alternative text for the option. If this attribute is present, its value will be displayed in the dropdown list rather than the text content of the tag.

<select name="country">
  <option value="US" label="United States">United States of America</option>
  <option value="UK" label="United Kingdom">United Kingdom of Great Britain</option>
  <option value="CA" label="Canada">Canada</option>
</select>

In this example, users will see "United States", "United Kingdom" and "Canada" in the dropdown menu, although the full content is different. This attribute is particularly useful for displaying abbreviated versions while keeping complete names in the source code.

Practical examples and use cases

Registration form with multiple selections

Here is a complete example of using the <option> tag in a registration form on a learning platform like Believemy:

<form action="/register" method="POST">
  <div class="form-group">
    <label for="domain">Main area of interest</label>
    <select id="domain" name="domain" required>
      <option value="" disabled selected>Select a domain</option>
      <option value="web">Web Development</option>
      <option value="mobile">Mobile Development</option>
      <option value="data">Data Science</option>
      <option value="design">UX/UI Design</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="experience">Experience level</label>
    <select id="experience" name="experience">
      <option value="beginner" selected>Beginner (0-1 year)</option>
      <option value="intermediate">Intermediate (1-3 years)</option>
      <option value="confirmed">Confirmed (3-5 years)</option>
      <option value="expert">Expert (5+ years)</option>
    </select>
  </div>
  
  <button type="submit">Register</button>
</form>

This form illustrates several best practices: using a disabled placeholder option, pre-selecting a logical default value, and correctly associating labels with their respective fields using for and id attributes.

Grouping options with <optgroup>

When you have many options, it is wise to organize them into logical groups using the <optgroup> tag. This significantly improves readability and user experience.

<select name="believemy_course">
  <option value="" disabled selected>Choose a course</option>
  
  <optgroup label="Frontend">
    <option value="html">HTML - Fundamentals</option>
    <option value="css">CSS - Style your pages</option>
    <option value="js">JavaScript - Dynamic websites</option>
    <option value="react">React - Modern applications</option>
  </optgroup>
  
  <optgroup label="Backend">
    <option value="php">PHP - Dynamic websites</option>
    <option value="node">Node.js - Server-side JavaScript</option>
    <option value="python">Python - Versatility and power</option>
  </optgroup>
  
  <optgroup label="Database">
    <option value="mysql">MySQL - Relational databases</option>
    <option value="mongodb">MongoDB - NoSQL databases</option>
  </optgroup>
</select>

Option groups appear with a bold title (not selectable) followed by the options they contain, creating a clear visual hierarchy.

Multiple selection

The select tag can accept the multiple attribute, allowing users to select multiple options simultaneously. In this case, each <option> can be checked or unchecked independently.

<label for="skills">Skills to develop (multiple choices possible)</label>
<select id="skills" name="skills[]" multiple size="6">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue.js</option>
  <option value="angular">Angular</option>
</select>
<p class="help">Hold Ctrl (or Cmd on Mac) to select multiple options</p>

The size attribute defines the number of options visible simultaneously without scrolling. Also note that the field name ends with [] so the server receives an array of values.

Usage with the <datalist> tag

The <option> tag can also be used within a <datalist> element to create an auto-complete suggestion list. Unlike a classic select, users can here enter a custom value while benefiting from suggestions.

<label for="technology">What technology do you want to learn?</label>
<input type="text" id="technology" name="technology" list="technologies-list" 
       placeholder="Type or select...">

<datalist id="technologies-list">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Python">
  <option value="PHP">
  <option value="React">
  <option value="Vue.js">
  <option value="Node.js">
</datalist>

Best practices for accessibility

Association with labels

To ensure good accessibility of your forms, you should always associate your selection lists with an explicit label element. This association allows assistive technologies, such as screen readers, to correctly announce the purpose of the selection field.

<!-- Recommended method: for/id attributes -->
<label for="country-residence">Country of residence</label>
<select id="country-residence" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<!-- Alternative method: nesting -->
<label>
  Country of residence
  <select name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </select>
</label>

Clear and descriptive texts

We recommend writing clear and descriptive option labels. Avoid obscure abbreviations and ensure each option is understandable out of context.

<!-- Avoid -->
<select name="type">
  <option value="1">Type 1</option>
  <option value="2">Type 2</option>
</select>

<!-- Recommended -->
<select name="account_type">
  <option value="personal">Personal Account</option>
  <option value="business">Business Account</option>
</select>

CSS styling of the <option> tag

The styling possibilities for <option> tags are unfortunately limited in pure CSS. Browsers apply their own default styles, and most CSS properties are ignored. However, here is what you can modify:

/* Basic possible styles */
option {
  background-color: #f5f5f5;
  color: #333;
  padding: 8px; /* often ignored */
}

/* Style the selected option */
option:checked {
  background-color: #3498db;
  color: white;
}

/* Disabled options */
option:disabled {
  color: #999;
  font-style: italic;
}

/* Parent select style (more possibilities) */
select {
  padding: 10px 15px;
  border: 2px solid #3498db;
  border-radius: 5px;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
}

Common mistakes to avoid

Forgetting the value attribute

Although the browser uses the text content as the default value, we advise you to always explicitly specify the value attribute. This avoids problems during server-side processing, especially if the visible text contains spaces or special characters.

<!-- Problematic -->
<option>Option with spaces and special chars</option>

<!-- Recommended -->
<option value="option_special">Option with spaces and special chars</option>

Using <option> outside its context

The <option> tag only makes sense when it is a direct child of a select, <optgroup> or <datalist> element. Used elsewhere, it will be ignored by the browser.

<!-- INCORRECT: orphan option -->
<div>
  <option value="test">This will not work</option>
</div>

<!-- CORRECT -->
<select>
  <option value="test">This works</option>
</select>

Confusing displayed text and value

It is important to understand the difference between text content (what users see) and the value attribute (what is sent to the server). This distinction allows you to present user-friendly labels while using technical values.

Attribute summary table

Browser compatibility

The <option> tag benefits from excellent compatibility with all browsers, being present since the earliest versions of HTML.

Frequently asked questions about the <option> tag

No, the <option> tag only accepts plain text as content. To integrate images or icons in a selection menu, you will need to use custom JavaScript solutions or libraries like Select2 that allow you to create enriched dropdown menus with custom HTML content.

You can retrieve the value of the selected option by accessing the value property of the select element. Here is an example:

const selectElement = document.querySelector('select[name="course"]');
const selectedValue = selectElement.value;

// To retrieve the text of the selected option
const optionText = selectElement.options[selectElement.selectedIndex].text;

The recommended technique is to create a first option with an empty value, the disabled and selected attributes, containing instruction text:

<select name="choice" required>
  <option value="" disabled selected>Please select an option</option>
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

To master HTML and all its tags, including form elements like <option>, we recommend following our comprehensive course to learn HTML. You will discover all the best practices for creating accessible and professional websites, with practical exercises and concrete projects to consolidate your learning.