What is the difference between id and class attributes in HTML?

HighEasyHtml

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

id vs class is not just selector syntax: it affects fragment links, CSS specificity, JS hooks, and the common mistake of duplicating ids across reusable UI.

Answer

Overview

The id and class attributes are not interchangeable. In production, the common mistake is treating both as generic labels: id is a unique identity hook for one node, while class is a reusable grouping hook for styling, behavior, fragment links, and test selectors.

Attribute	Purpose	Usage Scope	Example
`id`	Identifies a single, unique element	Can be used only once per page	`id="header"`
`class`	Groups multiple elements with a shared style or role	Can be reused across many elements	`class="btn-primary"`

Comparison between id and class attributes

Example 1: Using id for a unique element

HTML

<h1 id="main-title">Welcome to My Website</h1>

<style>
  #main-title {
    color: royalblue;
    text-align: center;
  }
</style>

Here, #main-title is a unique selector that applies styles only to that specific heading.

Example 2: Using class for reusable styling

HTML

<button class="btn">OK</button>
<button class="btn">Cancel</button>

<style>
  .btn {
    background-color: teal;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
  }
</style>

The class attribute lets you style multiple buttons the same way, making your CSS reusable and consistent.

Key Differences

id must be unique — each value can appear only once per HTML document.
class can be shared by any number of elements.
id is selected in CSS with # (e.g. #header), while class is selected with . (e.g. .btn).
id is often used for JavaScript targeting or page anchors; class is used for styling and grouping.

Still so complicated?

Think of id as a name tag — one per person.<br>And class as a team jersey — many people can wear the same one.

Summary

id uniquely identifies one element per page.
class groups elements that share styles or behavior.
Use id for single targets (anchors, JS hooks).
Use class for reusable styles and layouts.