HTML Guides for option

The HTML specification enforces this rule because a required <select> element needs options for the user to choose from. Without any <option> children, the element is semantically meaningless — it’s a dropdown with nothing to select, yet the form demands a selection before submission. This creates an impossible situation for the user and an ambiguous state for the browser.

This rule specifically applies when all three of these conditions are true:

• The required attribute is present.
• The multiple attribute is not present.
• The size attribute is either absent or set to 1 (the default for a single-selection <select>).

When multiple is set or size is greater than 1, the <select> behaves differently (as a list box rather than a dropdown), and the specification relaxes this constraint. But for the standard single-selection dropdown, at least one <option> is mandatory.

Why this matters

• Usability: A required dropdown with no options gives users no way to satisfy the form requirement, effectively blocking form submission entirely.
• Accessibility: Screen readers announce <select> elements along with their available options. An empty required dropdown creates a confusing experience for assistive technology users.
• Form validation: Browsers use the first <option> with an empty value as the placeholder. The built-in constraint validation for required selects relies on checking whether the selected option’s value is a non-empty string. Without any options, this validation behavior is undefined.

How the placeholder pattern works

The HTML specification defines a specific behavior for required single-selection dropdowns: the first <option> element, if it has an empty value attribute, acts as a placeholder. When the form is submitted with this placeholder still selected, browser validation will reject the submission because the value is empty. This is the standard pattern for prompting users to make a deliberate choice.

Examples

❌ Invalid: required <select> with no options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
</select>

This triggers the validation error because there are no <option> elements inside the required <select>.

❌ Invalid: required <select> with only a group but no options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
  <optgroup label="Colors">
  </optgroup>
</select>

An empty <optgroup> doesn’t satisfy the requirement. The <select> still needs at least one <option>.

✅ Valid: required <select> with a placeholder and options

<label for="color">Pick a color:</label>
<select id="color" name="color" required>
  <option value="">--Select a color--</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

The first <option> has an empty value, so it serves as a placeholder. The browser will require the user to choose one of the other options before submitting the form.

✅ Valid: required <select> with multiple (rule does not apply)

<label for="colors">Pick one or more colors:</label>
<select id="colors" name="colors" required multiple>
</select>

This does not trigger the error because the multiple attribute is present, which exempts the element from this particular rule. However, an empty multi-select is still poor UX and should generally be avoided.

✅ Valid: required <select> with size greater than 1 (rule does not apply)

<label for="colors">Pick a color:</label>
<select id="colors" name="colors" required size="4">
</select>

When size is greater than 1, the element renders as a list box and the rule no longer applies. Again, while technically valid, an empty list box isn’t useful in practice.

✅ Valid: required <select> with grouped options

<label for="vehicle">Choose a vehicle:</label>
<select id="vehicle" name="vehicle" required>
  <option value="">--Select a vehicle--</option>
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Trucks">
    <option value="pickup">Pickup</option>
    <option value="semi">Semi</option>
  </optgroup>
</select>

Options inside <optgroup> elements count as child options of the <select>, so this is fully valid.

In HTML, boolean attributes like selected work differently than you might expect if you’re coming from a programming language. A boolean attribute’s presence alone means “true,” and its absence means “false.” Setting selected="true" is invalid because the only permitted values for a boolean attribute are the empty string ("") or the attribute’s own name (e.g., selected="selected"). The value "true" is not recognized by the HTML specification, which is why the W3C validator flags it.

This matters for several reasons. First, it violates the WHATWG HTML specification, which explicitly defines how boolean attributes must be written. Second, while most browsers are forgiving and will still treat selected="true" as if the option is selected, relying on this lenient behavior is risky — it can lead to inconsistencies across browsers or tools that parse HTML strictly. Third, invalid markup can cause problems for assistive technologies, automated testing tools, and server-side HTML processors that follow the spec closely.

The same rule applies to other boolean attributes like disabled, checked, readonly, multiple, required, and hidden. None of them should be set to "true" or "false".

It’s also worth noting that setting a boolean attribute to "false" (e.g., selected="false") does not turn it off — the attribute’s mere presence activates it. To deactivate a boolean attribute, you must remove it entirely from the element.

Examples

❌ Invalid: using selected="true"

<select name="color">
  <option selected="true">Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

This triggers the validation error because "true" is not a valid value for the boolean selected attribute.

✅ Valid: bare attribute (preferred)

<select name="color">
  <option selected>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

The simplest and most common way to write a boolean attribute — just include the attribute name with no value.

✅ Valid: empty string value

<select name="color">
  <option selected="">Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

An empty string is a valid value for any boolean attribute per the HTML spec.

✅ Valid: attribute name as value

<select name="color">
  <option selected="selected">Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

Using the attribute’s own name as its value is also valid. This form is sometimes seen in XHTML-style markup and in templating systems.

❌ Invalid: using selected="false" to deselect

<select name="color">
  <option selected="false">Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

This is both invalid and misleading. The option will still be selected because the selected attribute is present. To not select an option, simply omit the attribute:

<select name="color">
  <option>Red</option>
  <option>Green</option>
  <option>Blue</option>
</select>

The <option> element represents a choice within a <select> dropdown, a <datalist>, or an <optgroup>. According to the HTML specification, every option must have a name — the text that is displayed to the user. This name can come from one of two sources: the text content between the opening <option> and closing </option> tags, or the label attribute on the element. If neither is provided, the option renders as a blank entry in the dropdown, which creates several problems.

From an accessibility standpoint, screen readers rely on the option’s label to announce each choice to the user. An empty, unlabeled option gives assistive technology nothing meaningful to read, making the control unusable for some users. From a usability perspective, sighted users see a blank line in the dropdown and have no idea what it represents. And from a standards compliance perspective, the HTML specification explicitly requires that an <option> without a label attribute must not have empty content.

Note that the value attribute is separate from the display text. The value is what gets submitted with the form, while the label/text content is what the user sees. Setting a value does not satisfy the requirement for visible text.

How to fix it

You have two options:

1. Add text content inside the <option> element (the most common and recommended approach).
2. Add a label attribute to the <option> element. When present, the label attribute takes precedence over the text content for display purposes in many browsers.

If you intend for an option to serve as a placeholder (e.g., “Choose one…”), make sure it still has visible text content.

Examples

❌ Empty option without a label

This triggers the validation error because the <option> elements have no text content and no label attribute:

<select name="size">
  <option value=""></option>
  <option value="s"></option>
  <option value="m"></option>
  <option value="l"></option>
</select>

✅ Fix: Add text content inside each option

<select name="size">
  <option value="">Choose a size</option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

✅ Fix: Use the label attribute

The label attribute provides the display text. The element content can then be empty or differ from the label:

<select name="size">
  <option value="" label="Choose a size"></option>
  <option value="s" label="Small"></option>
  <option value="m" label="Medium"></option>
  <option value="l" label="Large"></option>
</select>

✅ Mixing both approaches

You can use text content for some options and the label attribute for others. You can even use both on the same element — in that case, the label attribute typically takes precedence for display:

<select name="size">
  <option value="">Choose a size</option>
  <option value="s">Small</option>
  <option value="m" label="Medium">Medium (M)</option>
  <option value="l" label="Large">Large (L)</option>
</select>

❌ Common mistake: Assuming value counts as a label

This is still invalid because value is not displayed to the user:

<select name="color">
  <option value="red"></option>
</select>

✅ Corrected

<select name="color">
  <option value="red">Red</option>
</select>

In almost all cases, placing readable text directly inside the <option> tags is the simplest and most compatible approach. Reserve the label attribute for situations where you need the displayed text to differ from the element’s content.

When a <select> element is marked as required, the browser needs a way to determine whether the user has made a deliberate choice. The HTML specification requires that the first <option> element act as a placeholder — a non-selectable default that represents “no choice made.” For the browser’s constraint validation to work correctly, this placeholder option must have an empty value attribute (value=""), or it must have no text content at all.

This requirement only applies when all three conditions are met:

• The <select> has a required attribute.
• The <select> does not have a multiple attribute.
• The <select> does not have a size attribute with a value greater than 1.

In this configuration, the <select> renders as a standard single-selection dropdown, and the first <option> with an empty value serves as the “please choose” prompt. If the user submits the form without changing the selection from this placeholder, the browser will block submission and display a validation message — just as it would for an empty required text input.

Why this matters

• Form validation: Without a proper placeholder option, the browser may consider the first option as a valid selection, allowing the form to submit even when the user hasn’t actively chosen anything. This defeats the purpose of required.
• Accessibility: Screen readers and assistive technologies rely on standard patterns. A placeholder option clearly communicates to all users that a selection is expected.
• Standards compliance: The WHATWG HTML specification explicitly defines this constraint, and violating it produces a validation error.

How to fix it

1. Add a placeholder <option> as the first child of the <select>, with value="" and descriptive prompt text (e.g., “Choose an option”).
2. Alternatively, if you don’t want a visible placeholder, the first <option> can have no text content at all (<option value=""></option>), though this is less user-friendly.
3. Another approach is to add a size attribute equal to the number of options, or add the multiple attribute — but these change the visual presentation from a dropdown to a list box, so they’re only appropriate if that’s the desired UI.

Examples

❌ Incorrect: first option has a non-empty value

<select required>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

Here, “Small” is preselected and has a non-empty value. The browser treats it as a valid choice, so required validation never triggers — the form can be submitted without the user making an active decision.

❌ Incorrect: placeholder option has a non-empty value

<select required>
  <option value="none">Choose a size</option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

The first option looks like a placeholder, but its value is "none" rather than empty. The validator flags this because the browser considers "none" a valid value.

✅ Correct: placeholder option with an empty value

<select required>
  <option value="">Choose a size</option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

The first <option> has value="" and serves as a clear prompt. If the user doesn’t select a different option, form validation will prevent submission.

✅ Correct: placeholder option with no text content

<select required>
  <option value=""></option>
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

This also satisfies the constraint, though it may appear as a blank entry in the dropdown. It can work in cases where a <label> already makes the expected action clear.

✅ Correct: using a size attribute to avoid the requirement

<select required size="3">
  <option value="s">Small</option>
  <option value="m">Medium</option>
  <option value="l">Large</option>
</select>

By adding size="3" (equal to the number of options), the <select> renders as a list box rather than a dropdown. The placeholder requirement no longer applies because no option is implicitly preselected — the user must click to choose. Note that this changes the visual appearance significantly.

The name attribute was historically used on <option> elements in older HTML specifications, but it has been obsolete since HTML5. The WHATWG HTML Living Standard does not list name as a valid attribute for <option>. The valid attributes for <option> are disabled, label, selected, and value, in addition to the global attributes (such as id, class, style, etc.).

It’s important to understand that the name attribute on <option> never served the same purpose as name on <input> or <select>. For form submission, the browser sends the name from the parent <select> element paired with the value of the selected <option>. Putting name on individual <option> elements has no effect on form data and can mislead developers into thinking it influences form behavior.

Removing the obsolete name attribute ensures your HTML is standards-compliant, avoids confusion for developers maintaining the code, and prevents potential issues with future browser behavior. If you need to reference a specific <option> in JavaScript or CSS, use the id global attribute instead.

Examples

Incorrect: using the obsolete name attribute

<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option name="dog-option" value="dog">Dog</option>
  <option name="cat-option" value="cat">Cat</option>
  <option name="hamster-option" value="hamster">Hamster</option>
</select>

This triggers the validation error because name is not a valid attribute on <option>.

Correct: using id instead of name

If you need to uniquely identify each option (for example, to target them with JavaScript or CSS), use the id attribute:

<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option id="dog-option" value="dog">Dog</option>
  <option id="cat-option" value="cat">Cat</option>
  <option id="hamster-option" value="hamster">Hamster</option>
</select>

Correct: simply removing name if no reference is needed

In most cases, you don’t need to identify individual options at all. The value attribute is sufficient for form submission, and you can remove name entirely:

<select id="pet-select" name="pet">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>

Note that the name attribute on the <select> element itself is perfectly valid and necessary — it defines the key used when the form data is submitted. The obsolete attribute warning applies only to name on <option> elements.

A <select> element can only have multiple <option selected> if it includes the multiple attribute.

A <select> element represents a control that provides a menu of options. By default, only one option can be selected at a time unless the multiple attribute is present, allowing users to select more than one option. If multiple <option> elements use the selected attribute without multiple, this violates the HTML standard and triggers a validation error.

Example of incorrect usage:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage with only one selected option:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage for multiple selected options with multiple attribute:

<select name="color" multiple>
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Remove duplicate selected attributes unless multiple is set, or add the multiple attribute if multiple selection is intended.