id / class

Since:		HTML 4（1997）

id and class are global attributes that can be applied to almost all HTML elements. id gives an element a unique name to identify it, while class gives a name used to group multiple elements together. You use them to apply CSS styles or manipulate elements with JavaScript.

Syntax

<!-- Specifying an id -->
<div id="header">...</div>

<!-- Specifying a class -->
<p class="text-red">...</p>

<!-- Specifying multiple classes (space-separated) -->
<p class="text-large text-bold">...</p>

<!-- Specifying both id and class -->
<section id="about" class="section-wrapper">...</section>

Attribute list

Attribute	Description
id	Specifies a unique name that identifies the element. The same id cannot be used on more than one element per page.
class	Specifies the class name(s) the element belongs to. Multiple classes can be listed, separated by spaces. The same class name can be used on multiple elements.

Usage in CSS

Selector	Description
#id-name	Prefix the id with `#` to target it. Example: `#header { background: #fff; }`
.class-name	Prefix the class with `.` to target it. Example: `.text-red { color: red; }`

Sample code

sample_id_class.html

<!-- Using id and class in CSS -->
<style>
  /* id selector (#): only one per page */
  #main-title {
    font-size: 2rem;
    color: #333;
  }

  /* class selector (.): reusable across multiple elements */
  .highlight {
    background-color: yellow;
  }

  /* Combining multiple classes */
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
  .btn-primary {
    background-color: #0066cc;
    color: white;
    border: none;
  }
  .btn-secondary {
    background-color: #eee;
    color: #333;
    border: 1px solid #ccc;
  }
</style>

<!-- Uniquely identified by id -->
<h1 id="main-title">Main Title</h1>

<!-- Apply a class to multiple elements -->
<p>Regular text and <span class="highlight">highlighted text</span>.</p>

<!-- Combining multiple classes (space-separated) -->
<button class="btn btn-primary">Submit</button>
<button class="btn btn-secondary">Cancel</button>

<!-- Accessing an element by id with JavaScript -->
<p id="status">Status: pending</p>
<button onclick="document.getElementById('status').textContent = 'Status: done';">
  Mark as done
</button>

<!-- Toggling a class dynamically with JavaScript -->
<p id="target">Toggle the highlight on this text</p>
<button onclick="document.getElementById('target').classList.toggle('highlight');">
  Toggle highlight
</button>

Result

The heading gets a larger font size and color. The element with the highlight class displays a yellow background. Both buttons share the btn style, and the submit button additionally gets a blue background with white text.

View sample page

Notes

An id must be unique within a page. Using the same id on more than one element is a violation of the HTML specification. If ids are duplicated, document.getElementById() in JavaScript will only return the first matching element.

A class name can be reused as many times as needed. You can apply CSS to all elements sharing a class name at once, or use document.querySelectorAll(".class-name") in JavaScript to select and manipulate them together.

Names cannot start with a digit and cannot contain spaces. When joining multiple words, use a hyphen (e.g., main-title) or an underscore (e.g., main_title).

Naming Conventions (BEM)

On large projects, establishing a class naming convention dramatically improves code readability and maintainability. BEM (Block Element Modifier) is the most widely adopted convention.

Element	Role	Notation	Example
Block	An independent, self-contained component	block	card, nav, button
Element	A part that belongs to a block	block__element	card__title, nav__item
Modifier	A variation or state of a block or element	block--modifier	button--primary, card--featured

<!-- BEM in practice: card component -->
<style>
  .card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
  .card--featured { border-color: #e74c3c; }   /* Modifier */
  .card__header { background: #f5f5f5; padding: 1rem; }   /* Element */
  .card__title { font-size: 1.2rem; margin: 0; }          /* Element */
  .card__body { padding: 1rem; }                          /* Element */
  .card__footer { background: #f5f5f5; padding: 0.5rem 1rem; font-size: 0.85rem; }
</style>

<!-- Standard card -->
<article class="card">
  <div class="card__header">
    <h2 class="card__title">Article Title</h2>
  </div>
  <div class="card__body">
    <p>Article body text...</p>
  </div>
  <div class="card__footer">2025-01-15</div>
</article>

<!-- Featured card (with Modifier) -->
<article class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">Featured Article</h2>
  </div>
  <div class="card__body">
    <p>Featured article body text...</p>
  </div>
  <div class="card__footer">2025-06-01</div>
</article>

Dynamically Manipulating Classes with JavaScript

The classList API makes it easy to add, remove, and toggle classes.

var el = document.getElementById("target");

// Add a class
el.classList.add("active");

// Remove a class
el.classList.remove("active");

// Toggle a class (add if absent, remove if present)
el.classList.toggle("open");

// Check whether a class is present
if (el.classList.contains("disabled")) {
  console.log("This element is disabled.");
}

// Add/remove multiple classes at once
el.classList.add("fade-in", "visible");
el.classList.remove("fade-out", "hidden");

// Replace one class with another
el.classList.replace("btn-secondary", "btn-primary");