HTML class and id Explained - The Difference Between Classes and IDs

Previous Next

So far you have learned how to build full HTML pages - headings, paragraphs, tables, forms, and overall structure. But an important question remains: how do I target a specific element to style it with CSS or control it with JavaScript? The answer is the two attributes class and id - and this lesson explains everything about them.

A Real-Life Analogy

Imagine you are in a big school with hundreds of students. When the teacher wants to call a specific person, there are two options:

Call them by their unique full name - only one student in the class has that exact name. This is the concept of id.
Call them by their category - "Students in group one, stand up!" or "Everyone wearing a blue shirt, come here." This is the concept of class.

In HTML we do the same. We use class to group multiple elements, and id to identify one unique element that does not repeat.

The class Attribute - For Groups and Categories

The class attribute is used to give an element (or a group of elements) a shared category. The main goal: style them all at once with the same CSS rules.

<!-- Multiple elements share the same class -->
<p class="note">This is the first note.</p>
<p class="note">This is the second note.</p>
<span class="note">A note inline.</span>

Now in CSS you can style all three at once by writing:

/* Style all elements with class="note" */
.note {
    background-color: #fff3cd;
    border-right: 4px solid orange;
    padding: 10px;
}

More Than One Class on the Same Element

You can give a single element more than one class by separating them with spaces. The browser applies all class styles to that element:

<!-- This button has two classes: "btn" and "primary" -->
<button class="btn primary">Submit</button>

<!-- This card has three classes -->
<div class="card featured large">...</div>

Note: Spaces separate class names - do not use spaces inside a class name. If you want two words, use my-note or my_note, not my note.

The id Attribute - For One Unique Element

The id attribute is used to identify a single specific element on the page. It is like a national ID number - completely unique and never repeated.

<!-- Unique id for the main title -->
<h1 id="main-title">Welcome to DevArabi</h1>

<!-- Unique id for the contact form -->
<form id="contact-form">...</form>

<!-- Unique id for the footer -->
<footer id="page-footer">...</footer>

Strict rule: You must never repeat the same id on one page. If you want to target multiple similar elements, use class, not id.

The Key Difference Between class and id

Feature	class	id
Reuse	Can be used on multiple elements	Used only once per page
Multiple values	Element can carry multiple classes: `class="a b c"`	Element has only one id
Main use	Style groups with CSS	Target a single element or access it with JavaScript
CSS selector	`.note { ... }` (dot prefix)	`#main-title { ... }` (hash prefix)

Using id for In-Page Links

One of the best uses of id is creating internal links that jump to a specific section on the same page. This is what you see in table-of-contents sections in articles and blogs.

<!-- Table of contents links at the top -->
<nav>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#details">Details</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>

... (long content) ...

<!-- Target sections (href="#intro" points to id="intro") -->
<h2 id="intro">Introduction</h2>
<p>...</p>

<h2 id="details">Details</h2>
<p>...</p>

<h2 id="conclusion">Conclusion</h2>
<p>...</p>

When the user clicks "Details", the browser jumps to the section with id="details". The # in the link tells the browser this is an in-page anchor.

Full Practical Example

Here is a full HTML page using class and id in a professional way:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Articles Page - DevArabi</title>
</head>
<body>

    <!-- Unique id for the main title -->
    <h1 id="page-title">Latest Articles</h1>

    <!-- Each article has the same class "article-card" -->
    <article class="article-card">
        <h2>What is HTML?</h2>
        <p class="summary">A simple explanation of web markup.</p>
        <a class="read-more" href="/articles/html">Read more</a>
    </article>

    <article class="article-card featured">
        <h2>CSS Guide for Beginners</h2>
        <p class="summary">Learn how to style your pages from scratch.</p>
        <a class="read-more" href="/articles/css">Read more</a>
    </article>

    <!-- Unique id for the footer -->
    <footer id="page-footer">
        <p>All rights reserved &copy; 2025 DevArabi</p>
    </footer>

</body>
</html>

Now a CSS file can style every .article-card the same way, style .article-card.featured differently to highlight the featured article, and style #page-footer uniquely.

The Golden Rule - When to Use Each

Use class for almost everything. Even if the element is unique now, you might repeat it later. Reserve id for special cases only: in-page anchors, or when JavaScript needs to target one exact element.

Frequently Asked Questions - FAQ

Can I use non-English letters in class and id names?

Technically HTML5 allows it, but it is best to use English letters, numbers, and hyphens. English names are reliable with CSS and JavaScript and avoid problems.

Can the same element have class and id together?

Yes. An element can have class and id at the same time. For example: <div id="hero" class="section featured"> - this is valid and common.

What happens if I repeat the same id?

The browser will not stop the page, but JavaScript will find only the first element with that id and ignore the rest. Search engines also treat it as a code error. Avoid duplicates.

Are class and id names case-sensitive?

Yes. class="Note" and class="note" are completely different in CSS and JavaScript. Stick to lowercase to avoid mistakes.

What is a good class name?

Choose names that describe the function or content, not the visual appearance. For example, class="article-card" is better than class="red-box", because the color may change later while the function stays the same.

Great! You have now mastered how to name HTML elements professionally with class and id. In the next lesson, we will learn media - how to add video and audio to your page in HTML.