Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between an id and class in HTML
In HTML, both Id and Class are the element selector and are used to identify an element based on the name assign to these parameters. ID and Class selectors are the most widely used element selectors in CSS (HTML). The basic difference between ID and Class is that the ID selector is applied only to one element in a page, whereas the class selector can be applied to several elements on a single page.
Read this article to find out more about "id" and "class" in HTML and how they are different from each other.
What is ID in HTML?
In HTML, the "id" selector is used id attribute of an element. For an HTML element, the "id" name starts with the symbol '#' followed by a unique name. One important characteristics of the id element is that we can only attach one id selector to an element. Hence, the ID selector is always unique within an HTML page.
Example of ID Selector
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html>
What is CLASS in HTML?
In HTML, the "class" selector is used to select an element with a specific class attribute. The class selector starts with a period (.) followed by a class name. Unlike the id selector, we can attach multiple selector to an HTML element. Therefore, the class can be applied many time within a page. The important point to note about the class selector is that the class name must not be started with a number.
Example of Class Selector
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by class<h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>
Difference between ID and CLASS in HTML
The following are the important differences between Id and Class &minius;
Key |
Id |
Class |
|---|---|---|
Syntax |
In HTML, for an element, the ID name starts with the "#" symbol followed by a unique name assigned to it. |
"class" assigned to an element has its name starts with "." followed by class name. |
Selector |
Only one ID selector can be attached to an element. |
Multiple class selectors can be attached to an element. |
Uniqueness |
ID is unique in a page and can only apply to at most one element |
The class can be applied to multiple elements so it could be multiple times on a single page. |
Conclusion
The most significant difference that you should note here is that an element can have only one ID selector, while an element can have multiple class selectors. However, both ID and Class selectors are used to identify an element based on the name assigned to its parameters.
25K+ Views
