What is the Difference Between Classes vs IDs in HTML
6 min read
This lesson is a preview from our interactive course
Classes and IDs play a crucial role in identifying and styling elements within a web page. While they both serve the purpose of targeting specific elements, there are fundamental differences between them.
In this lesson, we'll explore the differences between classes and IDs and see how we can use them effectively.
How Classes Work#
In HTML, a class is an attribute that allows you to group elements together based on common characteristics. You can assign the same class to multiple elements, enabling them to share the same styling or behavior.
This is particularly useful when you want to apply consistent styles to multiple elements without having to repeat the styles individually.
To define a class, use the class attribute followed by a name of your choice. The name should not contain spaces and can be applied to any HTML element. Take the following as an example:
<!-- CSS classes can be also defined inside style tags -->
<style>
.highlight {
background: #2980B9;
color: #FFF;
}
</style>
<p class="highlight">This paragraph has a blue background.</p>
<p>This paragraph has no class applied.</p>
<p class="highlight">This paragraph is also highlighted.</p>
In the above code, the highlight class is defined in the style tag. It specifies a blue background color using a hex color code and white text.
The first and third paragraphs are assigned the highlight class, resulting in consistent styling for those elements.
Classes must always be prefixed with a dot (.) in CSS, followed by the name of the class.
Of course, elements can have multiple classes separated by whitespace. This can be used to combine different styles together. For example, the following code also increases the size of the font for the first paragraph:
<style>
.highlight {
background: #2980B9;
color: #FFF;
}
.large {
font-size: 21px;
}
</style>
<p class="highlight large">This paragraph has a blue background.</p>
<p>This paragraph has no class applied.</p>
<p class="highlight">This paragraph is also highlighted.</p>How IDs Work#
Unlike classes, IDs are unique identifiers for elements. Each ID can be assigned to only one element, allowing you to specifically target that element using CSS or JavaScript. IDs are often used when you need to refer to a particular element in JavaScript.
To assign an ID to an element, use the id attribute followed by a unique name. Just like with classes, the name should not contain spaces and can be applied to any HTML element:
<style>
#unique-id {
background: #2980B9;
color: #FFF;
}
</style>
<p id="unique-id">This paragraph has a blue background.</p>
<p>This paragraph has no id applied.</p>
<p>This paragraph also has no id applied.</p>In this case, we can only apply the ID to one element. We can have as many IDs as necessary, but we can't repeat the same ID on the same page twice.
As opposed to classes, IDs must be prefixed with a hash (#) in CSS.
Using IDs as anchors#
IDs are also often used as anchors on a page. When we reference an ID in the href attribute of an anchor tag, the document will scroll to the element with the ID. Take the following as an example:
<h1 id="title">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderi
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderi
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderi
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#title">Take me to the top</a>Execute the code and scroll down to the bottom of the page, then click on the link. It will scroll the document back to the top, as the href attribute is referencing the id of the h1. This is a common approach to trigger navigation within the same page.
Remove adsNaming Convention#
It's worth noting that you can also use dashes when naming classes and IDs. You can also use underscores and numbers; however, you cannot start a class or ID with a number. The following snippet showcases some valid and invalid use cases:
<!-- The following also apply to IDs. -->
<!-- ✔️ Valid class names -->
<p class="highlighted">...</p>
<p class="highlighted-01">...</p>
<p class="highlighted_with_underscore">...</p>
<!-- ❌ Invalid class names -->
<p class="01-highlighted">...</p>
<p class="!special-characters">...</p>Difference Between IDs and Classes#
While classes and IDs may seem similar at first glance, they have distinct purposes and use cases:
- Classes: Classes are designed to group multiple elements together. They allow you to apply shared styles or behaviors to various elements throughout your webpage. For example, you might use a class to style all the buttons or create a consistent look for paragraphs with the same purpose. Additionally, elements can have multiple classes, separated by spaces, which grants flexibility in combining styles.
- IDs: IDs, on the other hand, are used to uniquely identify individual elements. They provide a way to target specific elements for styling or manipulation. For example, you might use an ID to perform JavaScript operations on a particular element or use them as anchors. IDs should generally be unique within a document, as using the same ID for multiple elements can lead to unexpected behavior.
Conclusion#
In conclusion, classes enable you to group multiple elements together, making it easier to apply consistent styles and behaviors. On the other hand, IDs are unique identifiers that allow you to specifically target individual elements. To recap:
Prefer using classes over IDs. Only use IDs when absolutely necessary.
Use IDs for JavaScript or anchors.
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
Recommended
How to Create a Configurable Tabs Component in React
11 min read • React v18.2
How to Create a Responsive Timeline Component in React
10 min read • React v18.2
How to Create Dynamic Routes in Astro
9 min read