HTML Guide
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:
Related W3C validator issues
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.
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>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>checked is a boolean attribute and should not have a value; it must be written as just checked.
The checked attribute is used with <input> elements of type checkbox or radio. As a boolean attribute, it is either present (interpreted as true) or omitted (false). Adding any value, like checked="true", is not valid and causes a validation error. The correct usage is simply checked, not checked="true" or checked="checked".
Incorrect example:
<input type="checkbox" checked="true">Correct example:
<input type="checkbox" checked>Example in context:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkbox Example</title>
</head>
<body>
<label>
<input type="checkbox" checked>
Subscribe to newsletter
</label>
</body>
</html>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>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><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 <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>