In HTML, some special attributes are called boolean attributes. They’re unique because it’s the mere presence of the attribute that matters. If the attribute is present, it’s considered truthy, regardless of its value. If it’s omitted altogether, it’s considered falsy. Some examples are
If you want to mark an
input as a required field, you should add the
required attribute in one of three ways.
You can omit the value altogether:
Or set it to an empty string:
Or set it to the same name as the attribute itself:
All of the above are valid HTML, although I prefer the first two.
As explained in the MDN Web Docs:
HTML5 defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace.
You should neither do this:
Both of these are invalid HTML.
Worse still: even if you set
required="false", it will still be truthy. The MDN Web Docs explain:
To be clear, the values
"false"are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With
checked="false"for example, the element’s
checkedattribute would be interpreted as true because the attribute is present.
You can set a boolean attribute in one of three ways:
- Omit the value (e.g.
- Use an empty string (e.g.
- Use the name of the attribute itself (e.g.
You should not use any other strings—not even
For more information, check out Boolean Attributes in the MDN Web Docs.
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!