Runnable HTML Docs: Attributes

Q: What is the difference between class and id in HTML?

An id must be unique on the page and identifies one element, for #fragment links, and getElementById. A class can be shared by many elements, and one element can have several classes separated by spaces. Use classes for styling.

Q: How do I add multiple classes to an HTML element?

Put them in one class attribute separated by spaces: . Writing class twice does not work: the browser keeps only the first one.

Q: Why is my button still disabled with disabled="false"?

disabled is a boolean attribute: its presence means true, whatever the value says. To enable the element, remove the attribute, or set button.disabled = false in JavaScript, which removes it.

Q: Can I make up my own HTML attributes?

Use the data- prefix: data-price="12" or data-user-id="7" are valid on any element and readable in JavaScript through element.dataset. Invented names without the prefix are invalid HTML.

What HTML attributes are

An attribute adds information to an element. It goes inside the opening tag, written as a name, an equals sign and a value in quotes: name="value". An element can have any number of attributes, separated by spaces.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href tells the link where to go, src and alt describe the image, type, placeholder and required configure the input. Each element has its own set of attributes, and a few (the global attributes below) work on every element.

Syntax rules

<input type="text" name="city" value="Paris" disabled>

Name, equals sign, quoted value. Double quotes are the convention; single quotes work too (title='Say "hi"' is how you put a double quote inside a value).
Names are case insensitive. CLASS and class are the same attribute. Values are not: class="Box" and class="box" are different classes.
Quotes are optional without spaces, but quote anyway. class=big box gives the element the class big and a second, meaningless attribute called box.
Order does not matter. <img alt="" src="a.png"> is the same as <img src="a.png" alt="">.
Each name once per element. If an attribute appears twice, the browser keeps the first and silently drops the second.

Boolean attributes

Some attributes are on or off. For these, presence means true, and the value is ignored. disabled, checked, required, readonly, hidden, multiple, autofocus and open all work this way.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

The third button is disabled even though the value says false, because the browser only checks whether the attribute is there. To turn a boolean attribute off, remove it. In JavaScript, button.disabled = false does exactly that.

The class attribute

class gives an element one or more names that CSS and JavaScript use to find it. Several elements can share a class, and one element can have several classes, separated by spaces:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Each extra class adds its rules on top. In CSS a class is selected with a dot (.card); in JavaScript, element.classList.add('featured') and classList.remove change them. Classes are the normal way to style things: most of your CSS will target classes.

The id attribute

id gives an element a name that must be unique on the page. Use it when you need exactly one element: a link target, a <label for>, or document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Clicking the label focuses the input, because for="email" points at id="email". The link scrolls to #pricing because the fragment in the href matches the id.

	`class`	`id`
How many elements can share it	Any number	One (unique)
Values per element	Several, space separated	One
CSS selector	`.name`	`#name`
Typical use	Styling groups of elements	Link targets, labels, one specific element in JavaScript

An id cannot contain spaces. Start it with a letter to keep it easy to use in CSS: #2col is not a valid CSS selector without escaping.

Global attributes

These attributes work on any element:

Attribute	What it does
`id`	Unique name for the element
`class`	Space separated list of class names
`style`	Inline CSS, like `style="color: red"`
`title`	Tooltip text shown on hover
`lang`	Language of the content, like `lang="fr"`
`dir`	Text direction: `ltr`, `rtl` or `auto`
`hidden`	Hides the element (boolean)
`tabindex`	Makes an element focusable with Tab, or sets its order
`contenteditable`	Lets the user edit the element's text
`data-*`	Your own data, read with JavaScript

The lang attribute has its own page because it affects screen readers, translation and search.

data-* attributes

When you need to store your own value on an element, prefix the name with data-. Any name works after the prefix, and JavaScript reads the values through element.dataset, with dashes turned into camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id becomes dataset.productId. Values always come back as strings, so convert with Number() before doing arithmetic. CSS can select on them too: [data-price="4.50"].

Common mistakes

Writing class twice. <div class="a" class="b"> keeps only a. Put both in one attribute: class="a b".
Reusing an id. Two elements with the same id break #links, labels and getElementById, which returns only the first. Use a class for anything repeated.
disabled="false" or checked="false". The attribute is still present, so it is still on. Remove it instead.
Unquoted values with spaces. alt=My photo sets alt to My. Quote every value.
Inventing attributes without data-. <div price="4"> is invalid HTML and may clash with a future standard attribute. Use data-price.

Frequently Asked Questions

What is an HTML attribute?

An attribute is extra information written inside an opening tag as name="value". It configures the element: href sets where a link goes, src and alt describe an image, class and id let CSS and JavaScript find the element.

What is the difference between class and id in HTML?

An id must be unique on the page and identifies one element, for #fragment links, <label for> and getElementById. A class can be shared by many elements, and one element can have several classes separated by spaces. Use classes for styling.

How do I add multiple classes to an HTML element?

Put them in one class attribute separated by spaces: <div class="card featured dark">. Writing class twice does not work: the browser keeps only the first one.

Do HTML attributes need quotes?

Quotes are optional when the value has no spaces or special characters, but always quoting is the safe habit. class=big box gives the element the class big plus a separate attribute named box.

Why is my button still disabled with disabled="false"?

disabled is a boolean attribute: its presence means true, whatever the value says. To enable the element, remove the attribute, or set button.disabled = false in JavaScript, which removes it.

Can I make up my own HTML attributes?

Use the data- prefix: data-price="12" or data-user-id="7" are valid on any element and readable in JavaScript through element.dataset. Invented names without the prefix are invalid HTML.

Related concepts