What is the Difference Between Classes vs IDs in HTML

What is the Difference Between Classes vs IDs in HTML

Understanding the difference between selectors
Ferenc Almasi β€’ 2023 June 23 β€’ Read time 6 min read
  • twitter
  • facebook
HTML

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:

Copied to clipboard! Playground
<!-- 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>
How classes work in HTML Execute code

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:

Copied to clipboard! Playground
<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>
Separate classes by space Execute code

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:

Copied to clipboard! Playground
<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>
How IDs work in HTML Execute code

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:

Copied to clipboard! Playground
<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>
Using IDs as anchors Execute code

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.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTMLinfo Remove ads

Naming 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:

Copied to clipboard! Playground
<!-- 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>
Valid and invalid classes

Difference Between IDs and Classes

While classes and IDs may seem similar at first glance, they have distinct purposes and use cases:


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.

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

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

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.