HTML Id & Classes

When you build a webpage, you often want to style specific elements or target them using JavaScript. To do this effectively, HTML provides two essential core attributes: id and class.

While both serve the purpose of identifying elements, they are used in fundamentally different ways.

The id Attribute

The id attribute is used to uniquely identify a single element on a webpage.

Key Rules for IDs:

• Uniqueness: An ID must be completely unique within an HTML document. You cannot use the same ID name for more than one element on the same page.
• No spaces: ID names cannot contain spaces.
• Starts with a letter: An ID should begin with a letter (a-z or A-Z).

<div id="header-container">
  <h1 id="main-title">Welcome to the site</h1>
</div>

In the example above, header-container and main-title are unique identifiers for those specific elements.

When to use id:

• For unique sections of a page (e.g., #main-navigation, #footer).
• As a target for "jump links" (anchor links that scroll to a specific part of the page).
• When you need to target exactly one specific element with JavaScript (e.g., document.getElementById('main-title')).

The class Attribute

The class attribute is used to define a category or a group of elements. Unlike IDs, the exact same class name can be applied to multiple elements across your webpage.

Key Rules for Classes:

• Reusable: You can assign the same class to as many elements as you want.
• Multiple classes per element: A single HTML element can have multiple classes. You simply separate them with a space inside the attribute.

<p class="text-highlight bold-font">This is an important paragraph.</p>
<p class="text-highlight">This is another paragraph with a highlight.</p>
<button class="primary-btn">Click Me</button>
<a href="#" class="primary-btn">Link styled as a button</a>

When to use class:

• For applying the same CSS styling to many different elements (e.g., styling all primary buttons the same way).
• When targeting a group of elements with JavaScript (e.g., document.getElementsByClassName('text-highlight')).

Summary: id vs class

| Feature | id | class | | :--- | :--- | :--- | | Uniqueness | Must be unique per page | Can be reused on multiple elements | | Quantity per element| Only one ID per element | Multiple classes per element (space separated) | | CSS Selector | #idName | .className | | Best for... | Unique page sections, specific JS targeting | Reusable styles, grouping elements |

Understanding when to use IDs and Classes is a crucial step in mastering HTML and keeping your code organized!

💡 Himubey Tip

In CSS, classes are targeted using a dot (.className) and IDs are targeted using a hash (#idName). Since classes are reusable, you should almost always default to using class for CSS styling and save id strictly for unique JavaScript targeting or internal page anchor links.

Interview Questions

1. What is the primary difference between an id and a class in HTML?
2. Can a single HTML element have multiple classes? Can it have multiple IDs?
3. If you want to style 10 different buttons to look exactly the same, should you use an ID or a class? Why?