Back to: HTML Tutorials
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
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:
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:
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
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.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.