Difference between Class and ID in HTML
In HTML, every element has a unique identification (ID) and can be defined as belonging to a particular class of elements. Class is an attribute that allows the same element to have a different style or appearance. Understanding the difference between ID and class in HTML will help you understand how to use these attributes in your coding. Read on to know more about both ID and Class in HTML and also their usage.
What is an ID in HTML?
An ID is an identification used in HTML to uniquely identify a single element and can not be used more than once on a page. An element with an ID can be styled and identified with CSS using that ID. The ID is enclosed in curly braces, i.e. { } and must start with a letter followed by a combination of letters, numbers, and dashes “-“. Letters must be in lowercase and numbers should be in uppercase. The entire attribute is case-sensitive so if you start the attribute with a capital letter, the ID will not work.
How to use an ID in HTML?
A unique identifier (ID) is used to identify a specific element. For example, if you want to identify a header on your page, you can give it an ID and then write code to make the header stand out. Similarly, you can use an ID to style hyperlinks, anchors, images, paragraphs, and tables. For example, if you want to target a specific image on your page to make it look different, you can use an ID like this:
<img src=”images/logo.jpg” id=”logo” alt=”Logo”> This is how an element with an unique id is defined in HTML:
<!DOCTYPE html>
<html>
<style>
/* Style the element with the id "myBlogHeader" */
#myBlogHeader {
background-color: lightgray;
color: gray;
padding: 50px;
text-align: left;
}
</style>
<h1 id="myBlogHeader">My Blog</h1>
</html>Output:
What is Class in HTML?
A class is a type of identifier that is used to mark elements of a similar kind. A class is used to apply CSS to multiple elements on a page. Every element on a page can be given a class name. A class attribute is enclosed in curly braces, i.e. { } and can be defined as a name or a keyword. A class can be used with any HTML element such as a paragraph, a list, etc. Class is a very useful attribute while designing a page because it allows you to style many elements with just a single line of code. For example, you can give the p> tag a class name such as “red” and then use a CSS code to make all p> elements on the page red. This saves you a lot of time and effort as you don’t have to write separate CSS code for each p> element.
How to use Class in HTML?
A class is used to mark a specific element as belonging to a certain type of element. For example, you can use a class to mark a hyperlink as a link to your website’s contact page. Similarly, you can use classes to mark tables, paragraphs, lists, images, anchors, etc.
This is how multiple elements with same class is defined in HTML:
<style>
/* Style all elements with the class name “blog” */
.blog {
background-color: gray;
color: black;
padding: 30px;
}
</style>
<h2 class=”blog”>Blog 1</h2>
<p>HTML is love</p><h2 class=”blog”>Blog 2</h2>
<p>React JS</p><h2 class=”blog”>Blog 3</h2>
<p>HTML Interview Questions</p>
Output:
How to use id and class together?
Any HTML element (div, input, nav, body, etc.) can have both “id” and “class” at the same time. The only difference is that “id” can only have one unique value, whereas “class” can have multiple.
The id and class attributes can be used together to define a style for a particular element. For example:
<!DOCTYPE html>
<html>
<head>
<style>
.blog {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body><div id=”myBlogHeader” class=”blog”><p>Welcome to my blog!</p></div>
</body>
</html>
Output:
Differences between ID and Class in HTML
- An ID is used to identify a single element whereas a class is used to identify a group of elements.
- An ID can be used only once on a page whereas a class can be used multiple times on a page.
- You can define an ID in CSS as # followed by the ID, whereas a class can be defined as. followed by the class name.
- An ID is used as a selector which is followed by #, whereas a class is used as a selector which is followed by. View important HTML Questions asked in interviews.
We have seen a lot of differences between the two. But, when you look at it from the viewpoint of the browser, they are very similar. The main difference between them is that an ID is used to identify a single element whereas a class is used to identify a group of elements. You can use an ID only once on a page whereas you can use classes multiple times on one page. Also, CSS supports both of them but with different syntaxes.
Conclusion
Throughout the article, you have been introduced to the difference between ID and class in HTML and how they are used in coding. It is important to understand the difference between ID and class in HTML because they are used in almost all coding languages. If you really want to get into web development and coding, you need to know the basics of HTML as it is the language used to write all code.
