Home > Article > Web Front-end > The difference between id and class in HTML
The difference between id and class in HTML
- WBOYforward
- 2023-08-31 11:53:061747browse
In HTML, Id and Class are element selectors that identify elements based on the names assigned 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 only applies to one element in the page, while the class selector can be applied to multiple elements on a single page.
Read this article to learn more about "id" and "class" in HTML and the differences between them.
What is ID in HTML?
In HTML, the "id" selector is used for the id attribute of an element. For HTML elements, the "id" name starts with the symbol "#" followed by a unique name. An important feature of the id element is that we can only attach an id selector to an element. Therefore, ID selectors are always unique within an HTML page.
ID Selector Example
<!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 elements with a specific class attribute. Class selectors start with a period (.) followed by the class name. Unlike the id selector, we can attach multiple selectors to an HTML element. Therefore, this class can be applied multiple times within a page. An important thing to note about class selectors is that class names cannot start with a number.
Class Selector Example
<!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>
The difference between ID and CLASS in HTML
The following are the important differences between Id and Class &minius;
key |
Id |
kind |
|---|---|---|
grammar |
In HTML, for an element, the ID name starts with the "#" symbol, followed by the unique name assigned to it. |
The name of the "class" assigned to the element begins with "." Following is the class name. |
Selector |
Only one ID selector can be attached to an element. |
Multiple class selectors can be attached to an element. |
Uniqueness |
The ID is unique within the page and can only be applied to at most one element |
This class can be applied to multiple elements and therefore multiple times on a single page. |
in conclusion
The most significant difference you should note here is that an element can only have one ID selector, while an element can have multiple class selectors. However, both ID and class selectors are used to identify elements based on the name assigned to the element parameter.
The above is the detailed content of The difference between id and class in HTML. For more information, please follow other related articles on the PHP Chinese website!