Articles

HTML Class vs ID: What’s the Difference and When to Use Each

Learn the key differences between HTML `id` and `class` attributes with syntax, examples, and use cases. Explore when to use each and compare them for a better understanding.

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 the id in CSS.

The syntax of accessing this id in JavaScript is: 

document.getElementById("unique-id").property = "value";

Here,

  • getElementById accesses the element with the specified id.

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>  
    <p>Contact us at: [email protected]</p>  
  </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:

Output generated by using the id attribute of HTML

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.

Related Course

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Try it for free

What 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>  
    <p>Contact us at: [email protected]</p>  
  </footer>  


  <script>  
    // JavaScript to change the content of all elements with the "highlight" class  
    var 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:

Output generated by using the class attribute of HTML

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 and class 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 ids 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.

Codecademy Team

'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 team

Related articles

Learn more on Codecademy

Contents