ID vs Class: What's the Difference in HTML?

If you've just started learning HTML, you've probably wondered why both id and class exist. At first glance, they seem to do the same thing because both can be used to style elements with CSS or select them using JavaScript.

So why do we need two different attributes?

The short answer is this:

• An id is used to identify one unique element on a page.
• A class is used to group multiple elements together.

Once you understand this simple idea, knowing when to use each one becomes much easier.

What is an id?

An id is a unique identifier for an HTML element. Think of it as a name that should belong to only one element on the page.

For example:

<h1 id="page-title">Learnify</h1>

Here, page-title identifies this specific heading. You shouldn't use the same id on another element because IDs are meant to be unique.

What is a class?

A class lets you group multiple elements that share the same style or behavior.

For example:

<button class="btn">Login</button>
<button class="btn">Sign Up</button>
<button class="btn">Contact</button>

All three buttons use the same btn class because they probably look and behave the same.

Unlike an id, a class can be reused as many times as you want.

Think of It Like This

Imagine you're in a classroom.

Every student has a unique roll number.

That's like an id.

But many students can belong to the same class, such as "Grade 10."

That's like a class.

A roll number identifies one student, while a class groups many students together.

Using id and class in CSS

Both can be used to apply styles.

Using a class:

<button class="btn">Login</button>

.btn {
  background: purple;
}

Every element with the btn class will get the same style.

Using an id:

<h1 id="page-title">Learnify</h1>

#page-title {
  color: purple;
}

Notice the difference:

• Classes use a dot (.) in CSS.
• IDs use a hash (#).

Using id and class in JavaScript

JavaScript can select elements using either one.

document.getElementById("page-title");

or

document.querySelector(".btn");

The important thing to remember is that an id usually points to one element, while a class may match multiple elements.

When Should You Use an id?

Use an id when an element is unique.

Some common examples include:

• The main page heading
• A navigation menu
• A specific section you want to link to
• A unique form element

When Should You Use a class?

Use a class whenever multiple elements share the same style or functionality.

Some common examples include:

• Buttons
• Cards
• Navigation links
• Product boxes
• Form inputs

In real-world projects, you'll use classes much more often than IDs.

Common Beginner Mistakes

Using the same id multiple times

This is one of the most common mistakes.

<h2 id="title">HTML</h2>
<h2 id="title">CSS</h2>

Even though the browser might still display the page correctly, using the same id more than once creates invalid HTML and can cause problems with CSS and JavaScript.

Instead, use a class.

<h2 class="title">HTML</h2>
<h2 class="title">CSS</h2>

Using IDs for everything

Many beginners think IDs are somehow "better" than classes.

They're not.

Modern websites rely heavily on classes because they're reusable and easier to maintain.

Quick Summary

• An id identifies one unique element on a page.
• A class groups multiple elements together.
• An id should only be used once on a page.
• A class can be reused as many times as needed.
• In CSS, IDs use # and classes use ..
• You'll usually use classes much more often than IDs.