In this example, we have declared two id’s with the name “#menu1” and “#menu2” respectively in the style tag.
Then these id’s are used with the HTML elements. The “#menu1” id is used with <h2> tag and “#menu2” is used with <h3> tag. The properties defined inside the id are applied to the particular element on which it is used.
Note: In HTML5, the id attribute can be used by an HTML tag but the id attribute can not be used in HTML 4.01 because there are some restrictions to use an id attribute in HTML 4.01. The id attribute can not be used by <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> tag. In HTML 4.01 id can’t start with a number.
Difference between HTML Class and HTML ID:
The difference between the class and the id is that “id” is unique that can be applied to a single element while the “class” name can be be used by multiple elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "technology" */
#heading {
background-color: pink;
color: black;
padding: 30px;
text-align: center;
}
/* Style all elements with the class name "menu " */
.menu {
background-color: #ff5722;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<h2 id="heading"> Web Technologies </h2>
<h2 class="menu"> HTML </h2>
<p> HTML is markup language using which you can create your own website. </p>
<h2 class="menu"> CSS </h2>
<p> CSS is used to define styles of web pages. </p>
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok