An HTML attribute is a name-value pair written inside an element’s start tag that provides additional information about the element or changes how it behaves. In HTML, attributes set an element’s identity with id, its destination with href, its source with src, its state with disabled and its accessible meaning with attributes such as alt and aria-label.
Every attribute belongs to an element, never stands alone, and is interpreted by the browser according to the HTML Living Standard. When the page is parsed, attributes become part of the DOM, where scripts can read and change them while the page runs.
Syntax and parsing of HTML attributes
An attribute is written as name=”value” after the element name, for example <a href="/pricing">. Several attributes are separated by whitespace, their order has no meaning, and attribute names are case-insensitive in HTML documents, so HREF and href are equivalent.
Values may be enclosed in double quotes, single quotes or, when they contain no spaces or special characters, no quotes at all. Always quoting values is the recommended practice because it prevents subtle parsing errors when a value later gains a space. If the same attribute appears twice on one element, the parser keeps the first occurrence and ignores the rest.
| Form | Example | Notes |
|---|---|---|
| Double-quoted value | lang="en" | Recommended default |
| Single-quoted value | title='Close' | Useful when the value contains double quotes |
| Unquoted value | type=text | Valid but fragile |
| Boolean attribute | disabled | Presence alone means true |
| Empty value | alt="" | Meaningful, for example decorative images |
Categories of HTML attributes
Attributes fall into a few broad groups. Global attributes may appear on any element, while element-specific attributes only have meaning on certain elements. Two further groups extend HTML: ARIA attributes for accessibility and custom data attributes for application data.
| Category | Examples | Purpose |
|---|---|---|
| Global attributes | id, class, lang, hidden, tabindex | Identity, styling hooks, language, visibility |
| Element-specific attributes | href, src, alt, type, colspan | Configure one element type |
| Boolean attributes | required, checked, defer, autoplay | Switch a feature on by presence |
| ARIA attributes | role, aria-label, aria-expanded | Expose meaning to assistive technology |
| Custom data attributes | data-product-id, data-state | Store private data for scripts and CSS |
| Event handler attributes | onclick, onload | Inline scripting, generally discouraged |
Boolean attributes deserve special care. Writing disabled="false" does not enable a control; any presence of the attribute means true. To turn the state off, the attribute must be removed entirely.
Attributes compared with DOM properties
An HTML attribute and the corresponding DOM property are related but not identical. The attribute is the value written in the markup; the property is the live value on the JavaScript object that the browser creates from it. For many attributes they are reflected in both directions, but some are not.
| Aspect | HTML attribute | DOM property |
|---|---|---|
| Where it lives | In markup and the element’s attribute list | On the element object in JavaScript |
| Value type | Always a string | String, number, boolean or object |
| Access method | getAttribute() and setAttribute() | Direct access such as input.value |
| Input value after typing | Keeps the initial default | Holds the current user input |
| Link href | Value as written, possibly relative | Resolved absolute address |
The classic example is the value attribute of a text input. It defines the initial value, while the value property tracks what the user has typed. Resetting a form restores the attribute value, which explains behavior that often surprises developers.
Choosing and using attributes well
Good attribute use combines semantic HTML with the smallest set of attributes that fully describes the element. Native attributes should be preferred over scripted or ARIA equivalents, because browsers implement their behavior, keyboard handling and accessibility automatically.
| Need | Preferred attribute | Avoid |
|---|---|---|
| Describe an informative image | alt with meaningful text | Missing alt or file names as text |
| Mark a required form field | required on the input | Only a visual asterisk |
| Store data for a script | data-* attribute | Invented non-standard attributes |
| Open a link in a new tab safely | target with rel="noopener" | target without rel on old browsers |
| Delay image loading | loading="lazy" | Custom scripts for simple cases |
| Label an icon-only button | aria-label or visible text | title as the only label |
Attributes also serve as selectors for CSS and JavaScript. Styling through class and attribute selectors such as [data-state="open"] keeps presentation separate from structure, while `id` should be reserved for unique anchors, label associations and fragment links rather than general styling, because its high specificity makes later overrides difficult.
Common mistakes with HTML attributes
- Duplicate `id` values on one page break label associations, fragment navigation and scripts that expect uniqueness.
- Setting boolean attributes to false with a string value leaves the feature switched on.
- Using `title` for essential information fails on touch devices and for many keyboard and screen reader users.
- Overusing ARIA attributes on elements that already have native semantics can contradict the browser’s own accessibility information.
- Inserting untrusted text into attribute values without escaping can enable cross-site scripting, especially in
hrefand event handler attributes.
A non-technical view
An HTML attribute is an extra setting attached to a piece of a web page. The page is built from elements such as links, images and buttons, and attributes tell each one the details: where a link goes, which picture to show or what a button is called.
Think of a parcel with a label. The parcel is the element, and the label lists the address, the weight and whether it is fragile. Attributes are those labels, and the browser reads them to know how to handle each part of the page.
A concrete example
A developer is building the newsletter sign-up form for a museum website. The email field is written as an input with `type=”email”`, `required` and `autocomplete=”email”`, and it is connected to its visible label through matching for and id attributes. The submit button carries a data-campaign attribute that the analytics script reads to record which exhibition page the visitor came from.
Because these attributes are native, the browser validates the email format automatically, mobile keyboards show the at sign, saved addresses can be filled in with one tap and screen readers announce the field as required. The developer writes no custom validation script, and an accessibility review finds no labeling problems in the form.