HTML Attribute

Why It Matters

Attributes are where most silent breakage lives, because a wrong value produces no error message. A mistyped src leaves a blank box, a missing alt text leaves a screen reader announcing a filename, and a stray class name means a rule that looks correct never matches anything. They are also the join between markup and everything else: CSS selects on them, JavaScript reads and sets them, and search engines read a good many of them directly. When a page half-works, comparing the attributes the browser actually has against the ones in your source usually finds the problem in under a minute.

How It Works

As the parser builds each element it attaches the attributes it finds to that node, lower-casing the names. The browser then acts on the ones it recognises: src triggers a network request, href makes the element navigable, class and id become handles a CSS class or an id selector can match. Anything beginning with data- is ignored by the browser and left for scripts, reachable through the dataset property. An unknown attribute is not an error — it is kept on the element and does nothing, which is why a typo like clas="card" passes validation silently. In developer tools the element inspector shows the live attributes, and these can differ from the source when a script has changed them.

Real-World Example

Common Mistakes

• ✕Writing disabled="false" or required="false" — boolean attributes are true whenever they are present, so the only way to turn them off is to remove them
• ✕Putting a space around the equals sign or dropping the quotes on a value containing spaces — class = "card wide" silently produces something you did not intend
• ✕Assuming an attribute typo will be flagged somewhere — the browser keeps unknown attributes without complaint, so clas instead of class just quietly does nothing

Related Terms