Ids in HTML

Ids in HTML with Examples

In this article, I am going to discuss Ids in HTML with Examples. Please read our previous article where we discussed Classes in HTML with Examples. At the end of this article, you will learn everything about HTML Classes with Examples.

Ids in HTML

In Html, an id attribute is used to define an id for an element. The ID attribute can be used to distinguish between elements with the same name. The id attribute serves as a unique identifier. CSS and JavaScript use it to perform a specific task for a particular element. To access any attribute # symbol is used.

Id Attribute Syntax in HTML

Ids in HTML with Examples

Id Attribute in CSS

Ids are unique so we can’t apply the same id to different elements as we did in classes. with the help of id, we can style only one element at a time. It is very important to note that Html documents can’t have two elements with the same ids.

<!DOCTYPE html>
<html>
<head>

<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.card{
  color: black;
  border: 1px solid transparent;
  border-radius:10px;
  margin: 10px;
  padding: 25px;
  width:120px;
  }

#card1 {
  background-color: violet;
}
#card2 {
  background-color: lightblue;
}
#card3 {
  background-color: lightgreen;
}
</style>

</head>

<body>

<div class="card" id="card1">
<h2>CARD1</h2>
<p>This is CARD 1</p>
</div> 

<div class="card" id="card2">
<h2>CARD2</h2>
<p>This is CARD 2</p>
</div>

<div class="card" id="card3">
<h2>CARD3</h2>
<p>This is CARD 3</p>
</div>

</body>
</html>
Output:

Id Attribute in CSS

If you want to apply different styles to different elements, you can use ids.

Id Attribute in JavaScript

The id attribute is used in JavaScript to access unique Html elements.

<!DOCTYPE html>
<html>

<body>
<p id="demo"> Hello</p>
<button onclick="myFunction()"> Click </button>

<script>
function myFunction(){

document.getElementById("demo").innerHTML = "Welcome to Dot Net Tutorials";
}
</script>
  
</body>
</html>

Output:
Id Attribute in JavaScript

In the example above the text inside the paragraph is “Hello” the moment we click on the button it will change the text to “Welcome to Dot Net Tutorials”. You will get to know more about these things in the JavaScript tutorial.

HTML Bookmarks with ID

HTML bookmarks are used to allow readers to quickly navigate to specific sections of a website. If your page is very long, bookmarks can be very useful. To use a bookmark, first, make one and then add a link to it. When the link is clicked, the page will scroll to the bookmark location.

Creating Bookmark
<h1 id ="title"> Heading </h1>

Adding link to bookmark </br>
<a href="#title"> Jump to Title </a>

When a user clicks on this link the page will scroll to the h1 element.

Difference Between Class and ID in HTML

Difference Between Class and ID in HTML

The only difference is that “id” is unique within a page and applies to only one element, whereas “class” can be applied to multiple elements.

In the next article, I am going to discuss Formatting Elements in HTML with Examples. Here, in this article, I try to explain Ids in HTML with Examples and I hope you enjoy this HTML Ids with Examples article.

Leave a Reply

Your email address will not be published.