HTML Guide for boolean attribute
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>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.