HTML Validation

Bad value “true” for attribute “selected” on element “option”.

About This HTML Issue

The selected attribute on option elements is boolean, so it should not have any value associated.

To fix this issue, simply remove the value assigned to the selected attribute.

Instead of this:

<select>
  <option selected="true">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Use this:

<select>
  <option selected>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.

Learn more:

→ MDN - option attributes

Last reviewed: May 03, 2023

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues

Element “option” without attribute “label” must not be empty.

Drop-down lists can be defined in HTML by using the <select> tag, containing the different <option>s. Each <option> must have a name, which can be either contained between <option> and </option>, or alternatively using the label attribute.

Example:

<select name="size">
  <option value="s">small</option>
  <option value="m" label="medium"></option>
</select>

The “name” attribute on the “option” element is obsolete. Use the “id” attribute instead.

The <option> element no longer accepts a name attribute, which is now obsolete.

Example:

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

A “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have a child “option” element.

The W3C HTML validator issue arises when a <select> element is marked as required but doesn’t contain any <option> elements. The semantic purpose of a <select> element is to provide a list of options for the user to select from. If it is marked as required, it implies the user must make a selection from available options.

Here is an explanation of the involved elements and attributes:

<select>: This represents a drop-down list in an HTML form.
- required: When this attribute is present, it means the user must select an option before submitting the form. It cannot be empty.
- multiple: This boolean attribute allows multiple selections if present.
- size: This attribute specifies the number of visible options. If greater than 1 and multiple is not set, it turns the drop-down into a list box.

If the multiple attribute is not present and the size attribute is not greater than 1, you need at least one <option> element for the <select> to be valid when required is used.

To resolve this, ensure that your <select> element contains at least one <option>:

<label for="choices">Choose an option:</label>
<select id="choices" name="choices" required>
  <option value="">--Please choose an option--</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

This example includes a placeholder option with an empty value to prompt the user to select an option and other valid options. The value for the placeholder is empty, which is a common practice for required fields to prevent it from being selected by default.

The “select” element cannot have more than one selected “option” descendant unless the “multiple” attribute is specified.

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.

The first child “option” element of a “select” element with a “required” attribute, and without a “multiple” attribute, and without a “size” attribute whose value is greater than “1”, must have either an empty “value” attribute, or must have no text content. Consider either adding a placeholder option label, or adding a “size” attribute with a value equal to the number of “option” elements.

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

Add a placeholder <option> as the first child of the <select>, with value="" and descriptive prompt text (e.g., “Choose an option”).
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.
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.

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial