What is the difference between ID and CLASS in html
Learn the key difference between ID and CLASS in HTML. IDs are unique identifiers for single elements, while classes are reusable labels for multiple elements. Understand when to use each for clean, maintainable code in your web development projects.
When you're building a website with HTML and CSS, you’ll often need to style specific elements or apply JavaScript functionality. That’s where ID and class attributes come into play. They help you identify and group elements—but they work differently.
Let’s break it down in simple terms.
1. id — Unique Identifier
- Used to uniquely identify a single HTML element.
- Only one element on the page should have a given id.
- Often used for JavaScript targeting or linking (e.g., anchor links).
Example:
<div id="header">This is the header</div>
2. class — Reusable Style Group
- Used to define a group of elements with the same style or behavior.
- Can be reused across multiple elements.
- An element can have multiple classes.
Example:
<div class="box red">Box 1</div>
<div class="box blue">Box 2</div>Comparison Between Id and Class:
| Feature | id | class |
| Uniqueness | Must be unique | Can be used multiple times |
| Usage | Targeting one element | Styling or grouping elements |
| CSS Example | #header {} | .box {} |
| JavaScript Use | document.getElementById() | document.querySelectorAll('.box') |
| Syntax | id="header" | class="menu" |
📝 Quick Tips:
- Use id for things like anchors, form inputs, or unique layout elements.
- Use class for styling groups of elements, like cards, buttons, or form fields.
Here's a simple example that shows the difference between id and class in both HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for id */
#header {
background-color: darkblue;
color: white;
padding: 10px;
text-align: center;
}
/* CSS for class */
.box {
border: 1px solid gray;
padding: 10px;
margin: 5px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<!-- Unique ID -->
<div id="header">This is the Header</div>
<!-- Reusable classes -->
<div class="box">Box 1</div>
<div class="box highlight">Box 2 (Highlighted)</div>
<div class="box">Box 3</div>
</body>
</html>🔍 What's Happening Here:
- The
#headerstyle is applied only to one element with id="header". - The
.boxclass is applied to multiple divs to give them the same border and padding. - The
.highlightclass adds a yellow background, showing how multiple classes can be combined.
So id = specific, class = reusable and flexible.
Frequently Asked Questions (FAQ)
❓ What is the main difference between id and class in HTML?
The main difference is that an id must be unique within a page and is used to target a single element, while a class can be used on multiple elements and is ideal for grouping and styling similar elements.
❓ Can I use both id and class on the same element?
Yes, you can use both. For example:
This allows you to style the element specifically with id and generally with class.
❓ When should I use id instead of class?
Use id when you need to uniquely identify an element—especially when working with JavaScript or specific CSS targeting. Use class when you want to apply the same style or behavior to multiple elements.
❓ Can two elements have the same id in HTML?
No. IDs must be unique. Using the same id on multiple elements can lead to unexpected behavior, especially in JavaScript and CSS.
❓ Is class or id better for CSS styling?
Use class for reusable styles across multiple elements. Use id for one-time, specific styles. In CSS, id has higher specificity than class, so it will override class styles if both are applied.
Happy Coding! 😊