Frontend interview answer

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

HighEasyHtml

By FrontendAtlas Editorial · Updated Apr 4, 2026

Interview 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.

Interview focus

This HTML interview question tests whether you can explain HTML id vs class: specificity, DOM hooks, and common mistakes, connect it to production trade-offs, and handle common follow-up questions.

HTML id vs class: specificity, DOM hooks, and common mistakes explanation without falling back to memorized definitions
Attributes and Css reasoning, edge cases, and production failure modes
How you would answer the most likely HTML interview follow-up

Practice more HTML interview questions

Interview answer drill

Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more HTML interview questions Follow 7-day crash study plan Open Essential 60

Full interview 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.