Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between an id and class in HTML
In HTML, both id and class are attributes used to identify and select elements for CSS styling and JavaScript manipulation. The fundamental difference is that an id must be unique within a page and can only be applied to one element, while a class can be applied to multiple elements throughout the document.
Understanding the distinction between id and class is crucial for proper HTML structure, CSS styling, and JavaScript functionality.
What is ID in HTML?
The id attribute provides a unique identifier for an HTML element. Each id value must be unique within the entire document, making it perfect for targeting specific elements with CSS or JavaScript.
Syntax
Following is the syntax for using the id attribute −
<tag id="uniqueName">Content</tag>
In CSS, the id selector uses the # symbol −
#uniqueName {
property: value;
}
Example of ID Selector
Following example demonstrates the usage of id attribute for styling −
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#mainHeader {
color: green;
font-size: 28px;
text-align: center;
}
#welcomeText {
color: blue;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h1 id="mainHeader">Welcome to TutorialsPoint</h1>
<p id="welcomeText">This paragraph has a unique ID for styling.</p>
</body>
</html>
The output shows each element styled individually based on its unique ID −
Welcome to TutorialsPoint (green, 28px, centered) This paragraph has a unique ID for styling. (blue, 18px, with margin)
What is CLASS in HTML?
The class attribute allows you to assign the same styling or behavior to multiple elements. Unlike id, multiple elements can share the same class name, and a single element can have multiple classes.
Syntax
Following is the syntax for using the class attribute −
<tag class="className">Content</tag> <tag class="class1 class2">Multiple classes</tag>
In CSS, the class selector uses the . symbol −
.className {
property: value;
}
Example of Class Selector
Following example demonstrates the usage of class attribute for styling multiple elements −
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.highlight {
background-color: yellow;
padding: 10px;
margin: 5px;
}
.textCenter {
text-align: center;
}
.boldText {
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2 class="highlight textCenter">Main Title</h2>
<p class="highlight">This paragraph is highlighted.</p>
<p class="highlight boldText">This paragraph is highlighted and bold.</p>
<p class="textCenter">This paragraph is centered only.</p>
</body>
</html>
The output shows how classes can be reused and combined −
Main Title (yellow background, centered, padded) This paragraph is highlighted. (yellow background, padded) This paragraph is highlighted and bold. (yellow background, bold, padded) This paragraph is centered only. (centered text)
Using ID and Class Together
Elements can have both id and class attributes simultaneously. The id provides unique identification while classes provide shared styling.
Example
<!DOCTYPE html>
<html>
<head>
<title>ID and Class Together</title>
<style>
.article {
background-color: #f9f9f9;
padding: 15px;
margin: 10px;
border-radius: 5px;
}
#featuredArticle {
border: 3px solid #007bff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.title {
color: #333;
font-size: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<article class="article">
<h3 class="title">Regular Article</h3>
<p>This is a regular article with class styling.</p>
</article>
<article id="featuredArticle" class="article">
<h3 class="title">Featured Article</h3>
<p>This article has both an ID and class for special styling.</p>
</article>
</body>
</html>
The featured article gets both the class styling and additional unique styling from its ID.
Difference between ID and CLASS in HTML
Following are the key differences between id and class attributes −
| Aspect | ID | Class |
|---|---|---|
| CSS Syntax | Uses # symbol: #idName
|
Uses . symbol: .className
|
| Usage per Element | Only one ID per element | Multiple classes per element allowed |
| Uniqueness | Must be unique within the document | Can be reused across multiple elements |
| CSS Specificity | Higher specificity (100 points) | Lower specificity (10 points) |
| JavaScript Access | getElementById("idName") |
getElementsByClassName("className") |
| Primary Purpose | Unique identification and targeting | Grouping and reusable styling |
| Anchor Linking | Can be used as URL fragment (#idName) |
Cannot be used for anchor linking |
Best Practices
When working with id and class attributes, follow these best practices −
Use id for unique elements that need specific JavaScript functionality or anchor linking.
Use class for elements that share common styling or behavior.
Avoid using id for styling when the same styles might be applied to multiple elements.
Choose meaningful names that describe the element's purpose or content.
Use hyphens (-) or underscores (_) for multi-word names instead of spaces.
Conclusion
The id attribute is used for unique element identification with higher CSS specificity, while the class attribute enables reusable styling across multiple elements. Understanding when to use each attribute is essential for creating maintainable and well-structured HTML documents with effective CSS styling.
32K+ Views
