HTML class and id attribute - Their differences

Someone confuses about the class attributes and id attribute. They are almost equal, only found a slight difference.
Following are the differences between them:

1. Class attribute is used to define a style for a special type of HTML elements while Id attribute is used to define a specific style for one special HTML elements.

OR

Two different HTML elements having same class can have different CSS properties in Class attribute while it is not in the case of id attribute.

Example for using class attribute

<!DOCTYPE html>
<html>
<head>
<style>
    h3.element{color:red;}
    p.element{color:blue;}
</style>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3 class= "element"> HTML </h3>
<p class= "element"> HTML is the most common language of the internet's world wide web. </p>
</body>
</html>

Output

HTML

HTML is the most common language of the internet's world wide web.

In the above Example, there are two different HTML elements namely h3 and p with same class name (element), but they can have different properties. Here they have different color.

Example for using id attribute

<!DOCTYPE html>
<html>
<head>
<style>
    #element{color:red;}
</style>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3 id= "element"> HTML </h3>
<p id= "element"> HTML is the most common language of the internet's world wide web. </p>
</body>
</html>

Output

HTML

HTML is the most common language of the internet's world wide web.

In the above Example, there are two different HTML elements namely h3 and p with same id name (element), but they can not have different properties.
You should know that h3#heading or p#heading is wrong.

2. Dot symbol (.) is used before the class name to define it (example: .heading) while Asterisk symbol (#) is used before the id name to define it. (example: #heading)

3. For class attribute, name of the HTML Element may be either contain or not. i.e. you can write as .heading or h3.heading both are true while in id attribute, name of the HTML Element can not be contained. i.e. you can write as #heading but cannot as h3#heading.