HTML Attributes: Giving Your Elements Extra Information

You’ve met attributes all the way through this section — href on links, src and alt on images, type on inputs, colspan on table cells. Now let’s pull that thread together and look at attributes properly. They’re a small idea with a big role, and a couple of them — id and class — are the bridge that connects HTML to CSS and JavaScript.

This is the final piece of the HTML fundamentals. By the end you’ll understand what attributes are in general, the rules for writing them, and the handful of “global” attributes you’ll use on almost every element.

What an attribute is

An attribute is extra information attached to an element, written inside its opening tag. The basic shape is name="value":

<a href="https://acy-partner.com">A link</a>
<img src="cat.jpg" alt="A cat" />
<input type="email" />

In each case, the attribute sits in the opening tag and hands the element a detail it needs: where the link goes, which image to show, what type of input it is. An element can carry several attributes at once, separated by spaces:

<img src="cat.jpg" alt="A cat" width="400" height="300" />

A few rules worth knowing:

Attributes go in the opening tag only, never the closing tag.
The value is wrapped in quotes ("..."). Single quotes work too, but stick to double quotes for consistency.
Multiple attributes are separated by spaces.
Order doesn’t matter — src before alt or alt before src, both are fine.

Some attributes don't need a value

A few attributes are just on/off switches and don’t take a value — their presence alone is enough. For example, required on a form input means “this field must be filled in,” and disabled means “this control is turned off.” You write them as a single word: <input type="text" required />. These are called boolean attributes — there either is a required, or there isn’t.

Global attributes: usable on any element

Most attributes belong to specific elements — href only makes sense on a link, src on things that load a file. But a special group called global attributes can go on any element. Two of them are so important that you’ll use them constantly.

The `id` attribute

An id gives an element a unique name on the page:

<h2 id="pricing">Our Pricing</h2>

The key word is unique — an id should appear only once per page, and no two elements should share the same one. Think of it as a name tag for one specific element. You’ve already seen one use: jumping to a spot on the page with <a href="#pricing">. An id is also how JavaScript pinpoints a single element to work with, and how labels connect to inputs (a for="..." matches an id).

The `class` attribute

A class also labels an element, but unlike id, a class can be shared by many elements, and one element can have several classes:

<p class="intro">The first paragraph.</p>
<p class="intro highlight">Another paragraph with two classes.</p>

Classes are the main way you’ll connect HTML to CSS. Give several elements the same class, then write a single CSS rule, and everything with that class is styled in one go. Where id means “this one specific element,” class means “this group of elements that should look or behave the same.”

id is one, class is many

The simplest way to remember the difference: an id is unique — one element, one page, like a person’s ID number. A class is shared — a category that many elements can belong to, like a job title that lots of people have. Use id when you need to point at exactly one thing; use class when you’re grouping things together. In day-to-day styling, you’ll reach for class far more often than id.

How id and class connect the three layers

Here’s where it all clicks together. Remember the three layers: HTML for structure, CSS for appearance, JavaScript for behavior. The id and class attributes are how the other two layers find the HTML they want to affect.

Take this HTML:

<button id="buy-btn" class="primary">Buy now</button>

CSS can target the class to style it: “make everything with the class primary green with rounded corners.”
JavaScript can target the id to add behavior: “when the element with id buy-btn is clicked, add the item to the cart.”

So these attributes are the hooks the other two languages grab onto. You don’t need to know any CSS or JavaScript yet to get the point: id and class are what make your HTML addressable, so it can be styled and made interactive later. That’s exactly why they turn up on so many elements in real-world code.

Other useful global attributes

A few more global attributes are good to know early:

title shows a little tooltip when the user hovers over the element:

<abbr title="HyperText Markup Language">HTML</abbr>

style lets you apply CSS directly to one element. It’s handy for quick tests, but for real projects you’ll keep your styles in separate CSS files rather than inline:

<p style="color: blue;">This text is blue.</p>

lang declares the language of an element’s content (you’ve seen it on <html>, but it can go on any element if part of your page is in a different language).
data-* attributes let you attach your own custom data to an element for JavaScript to use later, like data-user-id="42". You won’t need these as a beginner, but it’s good to know they exist.

Writing attributes cleanly

A couple of habits that’ll keep your HTML tidy:

Always quote your values. class="intro" is correct; leaving off the quotes can cause subtle bugs.
Keep ids and classes meaningful. class="intro" or class="card" tells you what something is; class="x1" tells you nothing.
Don’t reuse an id on the same page. If you need the same label on multiple elements, that’s exactly what class is for.

Wrapping up — and the end of HTML basics

Attributes are the last core concept of HTML, and now you’ve got them:

An attribute adds information to an element, written as name="value" inside the opening tag.
Some attributes are boolean (like required) — their presence alone is the value.
Global attributes work on any element; the two most important are id (a unique name, used once) and class (a shared label, used by many).
id and class are the bridge that lets CSS style your HTML and JavaScript add behavior to it — they make your elements addressable.
Other handy globals include title, style, lang, and data-*.

And that’s the HTML fundamentals, start to finish. Across this section you’ve gone from “what is HTML” to structuring a document, writing text, adding links and images, building forms and tables, using semantic elements, and now wiring everything up with attributes. You can build a complete, well-structured, accessible web page — which is a genuinely solid foundation.

From here, the natural next step is CSS — the layer that takes the plain, functional HTML you can now write and makes it look exactly the way you want. That’s where your pages go from working to beautiful.