Attribute
An attribute extends an HTML or XML element, changing its behavior or providing metadata.
An attribute always has the form name="value"
(the attribute's identifier followed by its associated value).
You may see attributes without an equals sign or a value. That is a shorthand for providing the empty string in HTML; such attributes are considered to be boolean attributes. However, this is not allowed in XML: XML requires the equals sign followed by the attribute name.
The following code provides examples of different boolean attribute forms in HTML:
<input required />
<!-- is equivalent to -->
<input required="" />
<!-- or -->
<input required="anything" />
In XML, attributes without equals sign or value will throw a syntax error:
<tag id />
Reflection of an attribute
Attributes may be reflected into a particular property of the specific interface. It means that the value of the attribute can be read by accessing the property, and can be modified by setting the property to a different value.
For example, the placeholder
below is reflected into HTMLInputElement.placeholder
.
Considering the following HTML:
<input placeholder="Original placeholder" />
We can check the reflection between HTMLInputElement.placeholder
and the attribute using:
const input = document.querySelector("input");
const attr = input.getAttributeNode("placeholder");
console.log(attr.value);
console.log(input.placeholder); // Prints the same value as `attr.value`
// Changing placeholder value will also change the value of the reflected attribute.
input.placeholder = "Modified placeholder";
console.log(attr.value); // Prints `Modified placeholder`
See also
- HTML attribute reference
- Information about HTML's global attributes
- XML StartTag Attribute Recommendation in W3C XML Recommendation