Attributes and classes: extra info on your tags
Tags carry extra info in attributes — href for where a link goes, alt for what an image shows, class for a styling hook. Attributes are how a tag says more than just its name.
The big idea
Attributes are name-value pairs inside a tag that configure it; class is the key attribute linking an element to its CSS styles.
See it in code
An attribute is a name-value pair inside a tag that configures it. The most common one is href, which tells a link where to go:
<a href="https://example.com">A plain link</a>href="..." is the attribute; the part in quotes is its value. Without it, an <a> links nowhere.
The class attribute is a styling hook. Give the link class="btn", write a matching .btn rule, and the two connect — the link now looks like a button:
<style>
.btn { padding: 8px 16px; border-radius: 8px; background: #4f46e5; color: white; text-decoration: none; }
</style>
<a href="https://example.com" class="btn">A link styled as a button</a>class="btn" in the HTML meets .btn { ... } in the CSS, and the two connect. That pairing is how markup gets its styles.
Now an image, which leans on two more attributes. src points to the picture, and alt describes it — for screen readers, and for when the image fails to load:
<style>
.btn { padding: 8px 16px; border-radius: 8px; background: #4f46e5; color: white; text-decoration: none; }
.note { color: #64748b; font-size: 14px; }
</style>
<p class="note">Attributes add extra information to a tag.</p>
<a href="https://example.com" class="btn">A link styled as a button</a>
<p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Crect width='54' height='54' rx='10' fill='%2322c55e'/%3E%3C/svg%3E"
alt="A green rounded square" width="54">
</p>class is the bridge between HTML and CSS: the element says class="btn", the stylesheet says .btn { ... }, and they connect. href and src point somewhere; alt makes the image accessible. An id works like class but must be unique on the page.
Configuring a thing with named settings is universal: function keyword arguments, config files, command-line flags. In HTML, attributes are that configuration layer — and the class hook, connecting markup to styles and scripts, is one of the most-used ideas on the whole web.
Try it yourself
Add a title="Opens the resources page" attribute to the link and hover to see the tooltip. Then give the image a second class and style both classes to see how multiple classes combine.
The common mistake
Skipping alt on images, or reusing an id. Missing alt makes images invisible to screen readers and broken when they fail to load. And an id must be unique — duplicate ids break styling and scripts that target them. Use class when you need the same hook on many elements.
What it unlocks
Attributes and classes connect HTML to CSS, give the DOM elements to select, and underpin Tailwind.