HTML Class vs ID: What’s the Difference and When to Use Each
What is the id
attribute in HTML?
The id
attribute in HTML assigns a unique identifier to a single HTML element. This identifier can be used to style the element with CSS, interact with it via JavaScript, or create internal links within a webpage. Since id
values must be unique, they ensure that only one element on the page will be affected by the styles or scripts that reference it. Here’s the syntax for using the id
attribute in HTML:
<element id="unique-id">Content</element>
Here,
element
: Any valid HTML tag such as<div>
,<p>
,<h1>
, etc.id
: A user-defined unique identifier for that element.
Note: No two elements on the same page should have the same
id
.
The syntax for referring to the id
attribute of an element in CSS is:
#unique-id {
property: value;
}
Here,
- The
#
symbol references theid
in CSS.
The syntax of accessing this id
in JavaScript is:
document.getElementById("unique-id").property = "value";
Here,
getElementById
accesses the element with the specifiedid
.
Example:
<!DOCTYPE html><html lang="en"><head><title>HTML ID Attribute Example</title><style>/* CSS for styling the element with a specific ID */#intro {color: blue;font-size: 20px;font-family: Arial, sans-serif;}</style></head><body><header><h1>Welcome to My Website</h1></header><main><section><p id="intro">This is an introductory paragraph that has a unique ID.</p><p>This paragraph does not have a unique ID.</p></section></main><footer></footer><script>// JavaScript to change the content of the element with id="intro"document.getElementById("intro").innerText = "This paragraph has been updated using JavaScript!";</script></body></html>
In this example:
The paragraph with the
id="intro"
is styled with CSS to display in blue color, with a font size of 20px.The JavaScript script modifies the paragraph’s text content by selecting the element via its
id
and changing the text to “This paragraph has been updated using JavaScript!”
The output generated by this code will look like:
As we can see, the id
parameter ensures that only one element with this identifier is affected, making it ideal for unique selections and actions.
Now that we know how the id
attribute works, let us understand the class
attribute of HTML.
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Try it for freeWhat is the HTML class
Attribute?
The class
attribute in HTML assigns an element one or more class names. In contrast to the id
attribute, which is restricted to one element per page, the same class name can be assigned to multiple elements. This allows us to style, select, or manipulate groups of elements collectively, making it ideal for applying the same style or functionality to multiple elements on a page. The syntax of using the class
attribute in HTML is:
<element class="class-name">Content</element>
Here:
element
: Any valid HTML tag such as<div>
,<p>
,<h1>
, etc.class
: One or more class names for that element. Multiple class names may be assigned to a single element by separating them with spaces.
To refer to the class
attribute of an element in CSS, the following syntax is used:
.class-name {
property: value;
}
- The
.
symbol is used in CSS to reference the class of an element.
To access the elements using the class
attribute in JavaScript, use the following syntax:
document.getElementsByClassName("class-name")[0].property = "value";
getElementsByClassName
retrieves all elements that share the specified class name. This returns a collection so that you can access individual elements by their index.
Example:
<!DOCTYPE html><html lang="en"><head><title>HTML Class Attribute Example</title><style>/* CSS for styling elements with a specific class */.highlight {color: red;font-size: 18px;font-family: 'Arial', sans-serif;}</style></head><body><header><h1>HTML Class Example</h1></header><main><section><p class="highlight">This paragraph has a class that makes its text red.</p><p class="highlight">This is another paragraph with the same class, so it has the same styling.</p><p>This paragraph does not have a class.</p></section></main><footer></footer><script>// JavaScript to change the content of all elements with the "highlight" classvar elements = document.getElementsByClassName("highlight");for (var i = 0; i < elements.length; i++) {elements[i].innerText = "This text has been updated!";}</script></body></html>
In this example:
The first two paragraphs have the
class="highlight"
which applies the red color and font style.The JavaScript code targets all elements with the
highlight
class and modifies their text content.
The output generated by the code will be:
The class
attribute allows us to group elements and apply common styles or JavaScript functionality. Unlike the id
attribute, it provides flexibility in styling multiple elements without requiring them to be unique.
Now that we’ve explored the id
and class
attributes individually, let’s compare them to highlight their key differences.
Difference between the id
and class
attributes of HTML
The following table summarizes the core differences between the id
and class
attributes, making it easier to choose the right one for a specific use case:
Feature | id Attribute |
class Attribute |
---|---|---|
Uniqueness of Attribute | Must be unique within the entire HTML document. | Can be shared across multiple elements. |
Purpose of Use | Used to identify and work with one specific element. | Used to group multiple elements for styling or scripting. |
CSS Styling Behavior | Styles only one unique element. | Applies the same style to all elements with that class. |
How JavaScript Accesses it | Accessed using getElementById() , returns a single element. |
Accessed using getElementsByClassName() , returns a collection. |
How It Fits in HTML Structure | Assigned to a single element as a unique identifier. | Assigned to multiple elements to create logical groupings. |
Best Use Case Scenario | When a single element requires a distinct style or behavior. | When multiple elements should share the same style or script. |
Syntax in HTML | <element id="unique-id"> |
<element class="class-name"> |
When should you use id
or class
in HTML?
Understanding the difference is essential, but knowing when to use id and class in real-world scenarios is what makes you a better developer. Here’s a guide to help you decide:
Use id
when
- You need to target one specific element on the page (like a header, a special button, or a form).
- You’re linking to a particular part of the page using an anchor (e.g.,
href="#section1"
). - You want to apply JavaScript to a single element (e.g., a modal popup or toggle).
- You’re applying unique styling that shouldn’t be repeated on other elements.
Use class
when
- You have multiple elements that should share the same style (like buttons, cards, or text blocks).
- You’re applying the same JavaScript behavior to several elements (e.g., toggling visibility, animations).
- You want to keep your code clean and reusable by grouping elements logically.
Note: You can combine
id
andclass
on the same element if needed, just make sure the id stays unique. Here’s an example:
<p id="featured-para" class="intro-text">Welcome to our website!</p>
Conclusion
In this article, we examined the difference between the id and class attributes in HTML, covering their syntax, use cases, and how to decide which to use when. Understanding these foundational elements is key to writing clean, maintainable, and scalable code.
To continue building your HTML skills and dive deeper into hands-on practice, explore Codecademy’s Learn HTML course. It’s a great next step if you’re looking to strengthen your web development foundation.
Frequently asked questions
1. What is the best way to learn HTML?
The most effective way to learn HTML is through practical exercises and structured tutorials. Start with the basics of elements, tags, and attributes, then gradually build simple web pages. Online interactive platforms like Codecademy’s Learn HTML offer structured lessons and real-time feedback that make learning effective and engaging.
2. Is class
stronger than id
?
No, in terms of CSS specificity, id
is stronger than class
. This means that when both id
and class
styles are applied to the same element, the id
styles will take precedence over those from the class
selector, unless other factors like !important
are involved.
3. How do you target an element by id
in HTML?
To target an element by id
in CSS, use the #
symbol:
#my-id {color: red;}
In JavaScript, you can access it like this:
document.getElementById("my-id");
4. Can we give elements two id
s in HTML?
No, an HTML element cannot have more than one id
. The id
must be unique across the entire document and can only be assigned once per element. If you need to apply multiple styles or behaviors, use one id
and multiple class
attributes instead.
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
Learn more on Codecademy
- Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours - Free course
Learn HTML: Fundamentals
Build an important foundation for creating the structure and content for web pages.Beginner Friendly3 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours