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

ID Attribute Example page

"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

CLASS Attribute Example page




Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.