Home » HTML

What is the difference between 'ID' and 'CLASS' attribute in HTML?

In this article, we will learn about the 'Id' and 'Class' attributes in HTML and what are the differences between them?
Submitted by Prerna Saxena, on September 13, 2017

"ID" Attribute

The "ID" attribute is unique in a page. It is used to reflect the style for unique element, "ID" written followed by the "#".

For Example:

There is a CSS style defined by ID "#h01" which will be used to display 'Html Tutorials' in blue color.

<!DOCTYPE html>
<html>
	<head>
		<style>
			#h01 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1 id="h01">Html Tutorials</h1>
		<h2>This is a paragraph.</h2>
		<h3>This is a paragraph.</h3>	
	</body>
</html>

Output

"CLASS" Attribute

It is used to add same style to a group of elements. It is not unique within a web page. "Class" is written followed by the "." (Dot) sign.

For Example:

There is a CSS style defined by class ".h01" which will be used to display 'Html Tutorials' and 'This is a paragraph' in blue color.

<!DOCTYPE html>
<html>
	<head>
		<style>
			.h01 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1 class="h01">Html Tutorials</h1>
		<h2>This is a paragraph.</h2>
		<h3 class="h01">This is a paragraph.</h3>	
	</body>
</html>

Output

Comments and Discussions!

Load comments ↻