Id in HTML || HTML ID

Id in HTML is Added as an Attribute to an element to indicate that it should take on the styling Attribute of the Id to specify the unique identification of the HTML document.

It is usually used to target a unique element and use that id in CSS or JavaScript to style, manipulate or get data from it with that certain Id. Let us understand HTML Id in detail.

Syntax of HTML Id

<element id=”value“>

The HTML Id is defined by the hash character (#), followed by an id name. Then, the CSS properties described under the curlybraces{}. There should be no whitespaces in the id name and it should contain at least one element in the Id.

Features of HTML Id

  • HTML Id Attributes specifies unique Id for a for HTML element with the specific value within HTML text.
  • HTML Id Attributes can also be used by the Javascript for the modification of specific Id elements.
  • HTML Id Attributes have only one Id and each page can have only one element with that Id.
  • HTML Id supports global Attributes and the class name is case sensitive.

Basic Examples of HTML Id

1. Using HTML Id in CSS: To style the specific element with the id attribute in HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
HTML Id attribute in CSS
</title>
<style>
#Marvel {
padding: 60px;
background-color: yellow;
color: red;    
text-align: right;
} 

#DC
{
padding: 60px;
background-color: lightGreen;
text-align: left;
}
</style>
</head>
<body>
<p> Using HTML Id in CSS: </p>
<h1 id="Marvel"> Ironman </h1>
<h1 id="DC"> Batman </h1>
</body>
</html>

output:

2.Using Id Attribute in Javascript:  javascript use getElementsByIdName() method to access elements in HTML to perform certain task by using specific Id names.

Example:

<!DOCTYPE HTML>
<html>
<body>

<h1 id="title">WELCOME TO CODEBUN!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
  document.getElementById("title").innerHTML = "LEARN PROGRAMMING!";
}
</script>

</body>
</html>

output: Before clicking the change text button.

 

After clicking the change text button.

3.  Using Id to create HTML Bookmarks:  It is used to add links for making it easier for the reader to jump from one part to another specific part of the page is too long.

Example:

<!DOCTYPE html>
<html>
<body>
<head> using  HTML id in bookmarks</head>
<p><a href="#C5">Jump to Chapter 5</a></p>

<h2> Article 1</h2>
<p>Introduction to HTML</p>

<h2>Article 2</h2>
<p>HTML text Editor</p>

<h2>Article 3</h2>
<p>HTML Basic Tags</p>

<h2>Article 4</h2>
<p>HTML Elements </p>

<h2 id="C5">Article 5</h2>
<p>HTML attributes</p>


</body>
</html>

output: