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

LowEasyHtml

By FrontendAtlas Team · Updated Jan 30, 2026

Preparing for interviews?

Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.

Browse HTML interview questions Explore interview tracks Browse company questions

Quick Answer

Both id and class are used to identify HTML elements, but they serve different purposes. The id attribute uniquely identifies a single element, while the class attribute groups multiple elements under a shared name for styling or scripting.

Answer

Overview

The id and class attributes are both used to label HTML elements, but they work differently. The id attribute gives an element a unique name on the page, while class allows multiple elements to share the same style or behavior.

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.