In Html, Html ID is used to specify the unique ID for an Html Elements. You cannot give the same id to multiple Html elements. Html id is given to Html elements so that they have some special name and we can do some work in it with the help of CSS and JavaScript.
NOTE:-
Syntax:- - In CSS, You can select the Html element with the specific id by using the “#” symbol.
- In JavaScript, you can select the Html element with the given id by using the “getElementbyID()" method.
<tag id = “value”>
Let us see through an example:-
How to Use HTML ID in CSS documents.
<html>
<head>
<title> Example of Html ID </title>
<style>
#Cricket {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}
#football {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
</style>
</head>
<body>
<p id = "Cricket"> Cricket </p>
<p id = "football"> Football </p>
</body>
</html>
<head>
<title> Example of Html ID </title>
<style>
#Cricket {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}
#football {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
</style>
</head>
<body>
<p id = "Cricket"> Cricket </p>
<p id = "football"> Football </p>
</body>
</html>
Output:-
How to Use HTML ID Using JavaScript.
<html>
<head>
<title> Example of Html ID </title>
</head>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<h1 id="head"> Here is my website name </h1>
<button onclick="displayResult()">Click Here</button>
<script>
function displayResult() {
document.getElementById("head").innerHTML = "Welcome to Mad About Computer";
}
</script>
</body>
</html>
<head>
<title> Example of Html ID </title>
</head>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<h1 id="head"> Here is my website name </h1>
<button onclick="displayResult()">Click Here</button>
<script>
function displayResult() {
document.getElementById("head").innerHTML = "Welcome to Mad About Computer";
}
</script>
</body>
</html>
Output:-
Before Click
After Click
Different Between Class and ID
One of the major differences between class and id is that you can give the same class name to multiple Html elements. But you cannot give the Same ID to Multiple elements.
Let us see through an example
<html>
<head>
<title> Example of Html ID </title>
<style>
#bollywood {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}
.hollywood {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
}
</style>
</head>
<body>
<p id="bollywood"> Dil Bechara is a Bollywood movie. </p>
<p class="hollywood"> X-Men is a hollywood movie </p>
<p class="hollywood"> Fast and Furious is also a hollywood movie. </p>
<p class="hollywood"> Mission Impossible is also a hollywood movie. </p>
</body>
</html>
<head>
<title> Example of Html ID </title>
<style>
#bollywood {
font-size: 22px;
color: BLUE;
text-align: center;
background-color: lightblue;
}
.hollywood {
font-size: 36px;
color: red;
text-align: center;
background-color: lightGreen;
}
</style>
</head>
<body>
<p id="bollywood"> Dil Bechara is a Bollywood movie. </p>
<p class="hollywood"> X-Men is a hollywood movie </p>
<p class="hollywood"> Fast and Furious is also a hollywood movie. </p>
<p class="hollywood"> Mission Impossible is also a hollywood movie. </p>
</body>
</html>
Output:-
Thanks for Visiting Here
Have a good day you all.
People May Also Like
It’s those tales which end up being the inspiration for his or her visual details. The folks would be crucial.
ReplyDeletewebsite development agencies
I would love anybody to contact them thanks app agencies
ReplyDeleteto the very fact their provider is out of this international!
Well, it’s a nice one, I have been looking for. Thanks for sharing such informative stuff.
ReplyDeleteUX design agency
Well, it’s a nice one, I have been looking for. Thanks for sharing such informative stuff.
ReplyDeletecompany logo designers
It’s my first time to visit this site & I’m really surprised to see such impressive stuff out there.
ReplyDeletetop web agencies