7/20/20

HTML ID :- Full Explained


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:-
  • 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.
Syntax:- 

<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>


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>


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>

Output:- 



So that it for today guys if you have any quarries related to this comment down. I hope you like the article and the Html series. Follow us on my social media handles. Keep visiting here for more computer knowledge.

Thanks for Visiting Here

Have a good day you all.

People May Also Like

6 comments:

  1. It’s those tales which end up being the inspiration for his or her visual details. The folks would be crucial.
    website development agencies

    ReplyDelete
  2. I would love anybody to contact them thanks app agencies
    to the very fact their provider is out of this international!

    ReplyDelete
  3. Well, it’s a nice one, I have been looking for. Thanks for sharing such informative stuff.
    UX design agency

    ReplyDelete
  4. Well, it’s a nice one, I have been looking for. Thanks for sharing such informative stuff.
    company logo designers

    ReplyDelete
  5. It’s my first time to visit this site & I’m really surprised to see such impressive stuff out there.
    top web agencies

    ReplyDelete
  6. Good blog along with the excellent quality stuff and I’m sure this will be greatly helpful.Linkedin Profile Services

    ReplyDelete

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Blog Archive

Mad About Computer. Powered by Blogger.