Previous
Written by: rJTutorial Team | Last Updated:

HTML ID & Class

In HTML, id and class are attributes used to add identifiers and apply styles to elements. While they serve similar purposes—acting as hooks for CSS and JavaScript—they have distinct differences in their usage and logic:

id Attribute:

  • The id attribute is used to uniquely identify an element on a web page. Think of it like a person's Social Security Number; each id value must be unique within the entire HTML document.
  • You can use the id attribute to target a specific, one-of-a-kind element with CSS or JavaScript.
  • Example:
<div id="main-navigation">This is the unique header</div>
<p id="privacy-policy-footer">This is the specific footer text</p>
Developer Tip: IDs also act as "anchors." If you give a section an ID of #contact, you can link directly to it from anywhere using <a href="#contact">Jump to Contact</a>.

class Attribute:

  • The class attribute is used to apply one or more class names to an element. Multiple elements can share the same class name, making them perfect for repeatable patterns.
  • Classes are typically used to apply CSS styles to multiple elements that share common styling characteristics, like buttons, cards, or text highlights.
  • Example:
<p class="alert-text">Warning: This is an error message.</p>
<p class="alert-text">Warning: Your session is about to expire.</p>
Best Practice: Use classes for almost all of your styling. It makes your CSS much more flexible and reusable across different parts of your website.

Usage Differences:

id Usage:

  • Used to uniquely identify an element that only appears once (like a search bar or a main wrapper).
  • Each id value must be unique within the HTML document. Having two elements with id="header" is invalid HTML.
  • Typically used for elements that require direct manipulation via JavaScript or unique layout positioning.
  • Example usage in CSS: #header { color: blue; } (The # symbol denotes an ID).
  • Example usage in JavaScript: document.getElementById('header')
Watch Out: If you use the same ID on two different elements, JavaScript functions like getElementById will only return the first one it finds, which can lead to frustrating bugs in your code.

class Usage:

  • Used to apply common styling or behavior to a group of elements.
  • Multiple elements can share the same class name, and a single element can have multiple classes (separated by spaces).
  • Classes allow for easier and more efficient styling across multiple elements.
  • Example usage in CSS: .highlighted { background-color: yellow; } (The . symbol denotes a class).
  • Example usage in JavaScript (for multiple elements): document.querySelectorAll('.highlighted')
Common Mistake: Beginners often try to style elements using IDs because they have "higher priority" in CSS. This is called "high specificity" and it makes your CSS very hard to override later. Stick to classes for styling!

Best Practices:

  • Use id when you need to uniquely identify an element, such as a specific section for a "back to top" link or a single form submission button.
  • Use class when multiple elements share the same styling or functionality. For instance, all "Submit" buttons on your site should likely share a .btn-primary class.
  • Avoid using the same ID for multiple elements as it violates HTML standards and can lead to unexpected behavior in CSS and JavaScript.
Developer Tip: Use "kebab-case" (e.g., main-content-area) for your ID and class names. It is the industry standard for web development and much easier to read than maincontentarea.

Here's a summary of the differences:

  • id: The "Unique Identifier." Used once per page. High priority in CSS. Best for JS hooks and page anchors.
  • class: The "Type Identifier." Used as many times as you want. Best for reusable CSS styling and grouping similar elements.

By understanding the differences between id and class, you can use them effectively to structure your HTML and apply styles and functionality to your web pages in a clean, professional way.

Previous