HTML Guide

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

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

Related W3C validator issues

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.

Bad value “false” for attribute “hidden” on element X.

All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.

Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.

<!-- This is invalid because the hidden attribute should not have a value set -->
<div hidden="false"></div>

<!-- The correct way to hide a div is like this -->
<div hidden>This will be hidden</div>

<!-- And to show the element, we just don't hide it -->
<div>This won't be hidden</div>

Bad value “true” for attribute “allowfullscreen” on element “iframe”.

The allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.

Here is an example of correct usage:

<iframe src="https://example.com" allowfullscreen></iframe>

However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:

<iframe src="https://example.com" allow="fullscreen"></iframe>

Bad value “true” for attribute “multiple” on element “select”.

The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.

Instead of:

<select multiple="true">

You should use:

<select multiple>

Here is an example of the correct usage of the multiple attribute:

<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

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 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.

<select> elements that are required and are not multiple need a placeholder option that has no value, for example:

<select required>
  <option value="">choose size</option>
  <option value="s">small</option>
  <option value="l">large</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>