HTML Attributes and Values

Attributes add information to an element. Some identify a resource, some configure a control, and some provide hooks for styling or scripting.

<img src="images/workshop.jpg" alt="A person repairing a bicycle">
<button type="button" disabled>Save changes</button>
<p id="notice" class="message" data-state="draft">Draft saved.</p>

src, alt, type, disabled, id, class, and data-state all have different jobs. Use the attribute that matches the behavior you need; do not add attributes merely because they appear in examples.

Boolean attributes#

A boolean attribute is true when it is present. For example, disabled, required, checked, and multiple are not normally set to the words true or false.

<input type="email" required>
<input type="checkbox" checked>
<button disabled>Unavailable</button>

To make a boolean attribute false, remove it. Writing disabled="false" still leaves the attribute present and therefore disables the button.

Many attributes can be used on most HTML elements. id, class, title, lang, dir, and hidden are examples. Custom data attributes begin with data-, such as data-product-id; JavaScript can read them through element.dataset.

An attribute does not automatically make a feature accessible or secure. For example, required improves form usability, but the server must still validate submitted data.