You Are Here

Id Attribute for HTML

An HTML id attribute defines an identifier which is used to uniquely identify HTML element.
The id attribute is used with CSS and JavaScript to perform a specific task on a specific element.
The id attribute is defined in the <style> tag using # symbol followed by id.
The id must be unique in a whole document and once it used as an id attribute of an HTML element it can not be used in any other element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#menu1 {
background-color: #ff5722;
color: #fff;
padding: 30px;
text-align: center;
}
#menu2 {
border: 2px solid #ff5722;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2 id="menu1"> HTML </h2>
<h3 id="menu2"> CSS </h3>
</body>
</html>
Try it

Explanation of the above example:

In this example, we have declared two id’s with the name “#menu1” and “#menu2” respectively in the style tag.
Then these id’s are used with the HTML elements. The “#menu1” id is used with <h2> tag and “#menu2” is used with <h3> tag. The properties defined inside the id are applied to the particular element on which it is used.
Note: In HTML5, the id attribute can be used by an HTML tag but the id attribute can not be used in HTML 4.01 because there are some restrictions to use an id attribute in HTML 4.01. The id attribute can not be used by <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> tag. In HTML 4.01 id can’t start with a number.

Difference between HTML Class and HTML ID:

The difference between the class and the id is that “id” is unique that can be applied to a single element while the “class” name can be be used by multiple elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "technology" */
#heading {
background-color: pink;
color: black;
padding: 30px;
text-align: center;
}
/* Style all elements with the class name "menu " */
.menu {
background-color: #ff5722;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<h2 id="heading"> Web Technologies </h2>
<h2 class="menu"> HTML </h2>
<p> HTML is markup language using which you can create your own website. </p>
<h2 class="menu"> CSS </h2>
<p> CSS is used to define styles of web pages. </p>
<h2 class="menu"> Bootstrap </h2>
<p> Boostrap is a CSS framework. </p>
</body>
</html>
Try it

Use of HTML id with JavaScript

The id can be used with JavaScript to style elements on the webpage. The element is accessed using the getElementById() method.

Example:

<!DOCTYPE html>
<html>
<body>
<h2 id="myid"> HTML </h2>
<button onclick="displayResult()"> Click Here </button>
<script>
function displayResult() {
document.getElementById("myid").innerHTML = "HTML is Hypertext Markup Language";
}
</script>
</body>
</html>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *