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.