HTML Attributes

Understand the topic

Attributes configure elements and connect resources or relationships. Some attributes are global, while others only make sense on specific elements. Attribute names do not necessarily match JavaScript property names exactly. Before adding a constraint, confirm that the element and type support it. Invalid attributes may be ignored without an obvious error.

Worked example

<table><caption>Frequently used element attributes</caption><tr><th scope="col">Element</th><th scope="col">Useful attributes</th></tr>
<tr><th scope="row">a</th><td>href, target, rel, download</td></tr>
<tr><th scope="row">img</th><td>src, alt, width, height, loading, srcset, sizes</td></tr>
<tr><th scope="row">form</th><td>action, method, enctype, autocomplete</td></tr>
<tr><th scope="row">input</th><td>type, name, value, required, min, max, pattern, autocomplete</td></tr>
<tr><th scope="row">label</th><td>for</td></tr>
<tr><th scope="row">button</th><td>type, disabled, form, popovertarget</td></tr>
<tr><th scope="row">iframe</th><td>src, srcdoc, title, sandbox, allow, loading</td></tr>
<tr><th scope="row">video</th><td>controls, poster, preload, muted, loop</td></tr></table>

This table is an authoring aid, not a promise that every attribute applies to every input type or browser version.

Practice

Which attributes connect a label to a control and identify its submitted value?

label for matches the control id. The control name identifies the submitted value.

Common mistake

Do not invent attributes for behavior that requires CSS or JavaScript. Use documented attributes with their intended elements.

HTML documentation