HTML Attributes
1. Introduction
Attributes are name-value pairs written inside an opening tag that provide extra information about an element or modify its behaviour. Without attributes, many HTML elements would be incomplete — a link with no href, or an image with no src, is meaningless. In this lesson you will learn how attributes are structured, which ones are global, and how to use them correctly every time.
2. Concept
Attribute Syntax
Every attribute consists of a name, an equals sign, and a quoted value: name="value". Multiple attributes are separated by spaces within the opening tag. Some attributes are boolean — their mere presence enables the feature (e.g., disabled, checked, required).
Global vs Element-Specific Attributes
| Attribute | Scope | Example |
|---|---|---|
id |
Global — any element | <div id="hero"> |
class |
Global — any element | <p class="lead"> |
style |
Global — any element | <p style="color:red"> |
href |
<a> only |
<a href="/about"> |
src |
<img>, <script> |
<img src="pic.jpg"> |
alt |
<img> only |
<img alt="A cat"> |
data-* |
Global — custom data | <div data-id="42"> |
id attribute must be unique within a page. Using the same id on two elements causes CSS and JavaScript behaviour to become unpredictable.data-* attributes to store custom data that JavaScript can later read with element.dataset. This keeps logic out of class names.style attributes for production styling. They override external stylesheets and make maintenance very difficult. Use CSS classes instead.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attributes Demo</title>
</head>
<body>
<!-- id and class attributes -->
<h1 id="page-title" class="heading primary">Attributes</h1>
<!-- href on an anchor element -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- src and alt on an image -->
<img
src="https://via.placeholder.com/100"
alt="A 100 by 100 placeholder image"
width="100"
height="100"
>
<!-- Boolean attribute: disabled -->
<button disabled>Cannot Click</button>
<!-- Custom data attribute -->
<div data-product-id="sku-9821" data-category="electronics">
Wireless Speaker
</div>
</body>
</html>
4. How It Works
Step 1 — id and class
id="page-title" gives the element a unique identifier; JavaScript can find it with document.getElementById("page-title"). class="heading primary" assigns two CSS classes separated by a space — both styles will apply.
Step 2 — href, target, rel
href sets the link destination. target="_blank" opens the URL in a new tab. rel="noopener noreferrer" is a security best practice — without it, the opened page can access the originating window via window.opener.
Step 3 — src, alt, width, height on img
src tells the browser where to fetch the image. alt provides descriptive text for screen readers. Explicit width and height prevent layout shift during loading.
Step 4 — Boolean Attributes
For disabled, simply writing the name is enough. <button disabled> and <button disabled=""> are equivalent. Never write disabled="false" — that still disables the button.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card</title>
</head>
<body>
<article id="profile-card" class="card" data-user-id="1042">
<img
src="https://via.placeholder.com/80"
alt="Profile photo of Maria Gonzalez"
width="80"
height="80"
class="avatar"
>
<div class="card__body">
<h2 class="card__name">Maria Gonzalez</h2>
<p class="card__role">Senior UX Designer</p>
<a
href="mailto:maria@example.com"
class="btn btn--primary"
title="Send Maria an email"
>Contact</a>
<a
href="https://linkedin.com/in/maria"
target="_blank"
rel="noopener noreferrer"
class="btn btn--secondary"
>LinkedIn</a>
</div>
</article>
</body>
</html>
6. Common Mistakes
❌ Duplicate id values
<div id="box">First</div>
<div id="box">Second</div>✓ Each id must be unique on the page
<div id="box-1">First</div>
<div id="box-2">Second</div>❌ Boolean attribute set to “false”
<button disabled="false">Submit</button>✓ Remove the attribute entirely to un-disable
<button>Submit</button>7. Try It Yourself
8. Quick Reference
| Attribute | Element(s) | Notes |
|---|---|---|
id |
All | Must be unique per page |
class |
All | Multiple classes space-separated |
href |
<a>, <link> |
URL or mailto: or #id |
src |
<img>, <script> |
Path or URL to resource |
alt |
<img> |
Required for accessibility |
disabled |
Form controls | Boolean — presence = disabled |
data-* |
All | Custom data; read via dataset |