Attributes

Attributes are how you configure an element beyond what its tag name already says. A <a> tag means "this is a link," but where it links to has to come from somewhere — that's an attribute's job.

The name="value" syntax

HTML

<a href="https://example.com" target="_blank">Visit</a>

Attributes live inside the opening tag, after the tag name.
Each attribute is a name, an equals sign, and a quoted value: <code>href="https://example.com"</code>.
An element can have any number of attributes, separated by spaces.

Boolean attributes

Some attributes don't represent a value at all — they represent a yes/no toggle. Their mere presence means "true"; their absence means "false." These are called boolean attributes.

HTML

<input type="text" disabled />
<input type="checkbox" checked />
<video src="clip.mp4" controls autoplay muted></video>

Attribute	Meaning when present
`disabled`	The form control cannot be interacted with
`checked`	A checkbox or radio button starts selected
`required`	The form control must have a value before submitting
`controls`	Show the browser's built-in media playback controls
`autoplay`	Media starts playing automatically

You don't write disabled="true"

Writing disabled="true" or even disabled="false" still counts as *present*, and the browser treats the control as disabled either way. To turn a boolean attribute off, remove it entirely — don't set it to "false."

Quoting rules, revisited

As covered on the Syntax Rules page, attribute values are conventionally wrapped in double quotes. This becomes more than a style choice once a value contains spaces or special characters — at that point, quoting is required, not optional.

HTML

<!-- Requires quotes: the value contains a space -->
<img src="my photo.jpg" alt="A photo of the coast" />

<!-- Would break without quotes: browser sees two separate, invalid attributes -->
<img src=my photo.jpg alt=A photo of the coast>

Unquoted values with spaces silently break

In the broken example above, the browser interprets photo.jpg, alt=A, photo, and of as separate, meaningless attributes — not one coherent alt value. Always quote.

Attribute order doesn't matter

Unlike element nesting, the order of attributes within a tag has no effect on behavior or meaning. These two lines are functionally identical:

HTML

<input type="email" name="email" required placeholder="you@example.com" />
<input placeholder="you@example.com" required name="email" type="email" />

Even so, many teams adopt a conventional order (e.g. id/class first, then behavior-related attributes, then data-* attributes last) purely for readability and consistency across a codebase — not because HTML requires it.

A preview of data-* attributes

Beyond the standard, predefined attributes, HTML lets you invent your own custom data attributes, as long as they're prefixed with data-. These carry information for your own JavaScript or CSS to use, without inventing non-standard tags or attributes.

HTML

<li data-product-id="4521" data-in-stock="true">Ceramic Mug</li>

JavaScript can then read element.dataset.productId directly. A full dedicated page on data-* attributes later in this series covers this pattern, and the related HTML APIs section, in much greater depth.

Attributes are the configuration layer of HTML

If tags say *what* something is, attributes say *how it behaves* or *what extra information it carries*. Getting comfortable with this split makes the rest of HTML — forms, links, media, accessibility — click into place much faster.

Next, we look at a small set of attributes so common they apply to nearly every HTML element: the global attributes.