ID and Class in HTML and difference between ID and Class in HTML

What is ID and Class in HTML?

HTML IDs and Classes are the selectors which identify elements in your code. While writing your code in small sections, you can give name to your sections in the form of ID and Class in order to target your section’s code. ID applies to uniquely identify an HTML element while Class applies to more than two elements. Both ID and Class mainly used in CSS and javaScript to target a particular HTML element. Let us understand the function of IDs and Classes in HTML.

1. ID in HTML?

The Id attribute specifies a unique id for an HTML element. Suppose, you are writing a code to build your web page. The web page may be divided into small sections or blocks. Now, if you want to set properties of each block different from each other, then, it can be done with the help of ID attribute. You just simply give different ID to each block and then target every block with the help of CSS (Cascading Style Sheet). The value must be unique within the HTML document. The id attribute is mostly used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking, scripting, or styling (with CSS). You cannot have more than one element with the same id in an HTML document. The syntax for Id is

Write a hash character (#) character, followed by an id name. Then, define the CSS properties within curly braces {}.

Suppose, ID=”firstpara”, then its syntax is

#firstpara{
          Setting properties of paragraph;
	  }

Let us understand it with the help of an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IDs in HTML</title>
<style>
#Box1{
	background-color:pink;
	color:red;
	text-align:center;
	width:25%
	}
#Box2{
	background-color:lightblue;
	color:black;
	text-align:left;
	width:25%
	}
</style>
</head>
<body>
    <h2>IDs tutorial</h2>
    <div id="Box1">
    <p>The first div with ID given as Box1</p>
    </div>
<div id="Box2">
    <p>The second div with ID given as Box2</p>
    </div>
</body>
</html>

Its result is as follows:

ID in HTML?, www.programmingtutorial.in

You can find in the result, the properties we have given to both boxes. The Box1’s background as pink, color as red, text alignment as center whereas in Box2 background as lightblue, color as black and text alignment as left. This simply means Id is uniquely identifying its own section.

2. Class in HTML

The Class attribute specifies a class for an HTML element. Suppose, you are writing a code to build your web page. The web page may be divided into small sections or blocks. Now, if you want to set same properties of two or more blocks, then, it can be done with the help of class attribute. You just simply give same class name to the blocks you want to give same properties. Multiple HTML elements can share the same class.

The class attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class. Class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. Let us take an example with code for classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class in HTML</title>
<style>
.Box{
	background-color:pink;
	color:red;
	text-align:left;
	width:20%;
	border:2px solid black;
	margin:5px;
	}
.container{
	background-color:blue;
	color:yellow;
	text-align:center;
	width:25%
	}
</style>
</head>
<body>
    <h2>Classes tutorial</h2>
    <div class="Box">
    <p>The first div with class given as Box</p>
    </div>
<div class="Box">
    <p>The second div with class given as Box</p>
    </div>
<div class="container">
    <p>The third div with class given as container</p>
    </div>
</body>
</html>

Its result is as follows:

Class in HTML?, www.programmingtutorial.in

In above result, first two div execute with same class name “Box” whereas third div has been targeted with a class name “container”.

Difference between IDs and Classes in HTML

There are some differences in between ID and Class.

  • Each element has one ID whereas multiple elements can share same class.
  • Multiple classes apply to the same element but multiple IDs does not apply to the same element.
  • A class selector is a name executes with a full stop (“.”) and an ID selector is a name executes with a hash character (“#”).

Let us now write a combined code to understand the difference between ID and Class

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Difference between ID and Class in HTML</title>
<style>
.Box1{
	background-color:pink;
	width:20%;
	border:2px solid black;
	margin:5px;
	}
.Box2{
	font-weight:bold;
	color:red;
	text-align:left;
	margin:5px;
	width:20%;
	}
#container1{
	background-color:blue;
	color:yellow;
	text-align:left;
	width:30%
	}
#container2{
	background-color:pink;
	color:green;
	text-align:center;
	width:25%
	}
</style>
</head>
<body>
    <h2>Difference between ID and Class in HTML</h2>
<div class="Box1">
    <p>The first div with class given as Box1</p>
</div>
<div class="Box1 Box2">
    <p>The second div with classes given as Box1 and Box2</p>
    </div>
<div class="Box2">
    <p>The third div with class given as Box2</p>
    </div>
<div ID="container1">
    <p>The fourth div with ID given as container1</p>
    </div>
<div ID="container2">
    <p>The fifth div with ID given as container2</p>
    </div>
</body>
</html>
Difference between IDs and Classes in HTML, www.programmingtutorial.in