HTML ID Attribute Syntax and Example

In this HTML Tutorial, we are going to learn about HTML id Attribute and its uses. So let’s start!!!

Keeping you updated with latest technology trends, Join DataFlair on Telegram

HTML ID Attribute

Id attribute is useful to identify a particular element in the document uniquely. It can be used with at most one element. It also acts as a distinguisher between two or more elements with the same name. HTML ID is widely used to style a particular element using CSS or perform a task on it using JavaScript.

html id attribute

Usage of Id Attribute in HTML

  • The id value can be accessed by CSS and JavaScript for styling and performing specific tasks respectively.
  • id of an element is case sensitive and must contain at least one character.
  • The id attribute can be applied to all the elements.

Syntax-

<tagname id=””></tagname>

Example of HTML ID Attribute

<!DOCTYPE html> 
<html> 
<head> 
    <title>DataFlair id attribute</title> 
    <style>  
        #DataFlair { 
            font-size:50px; 
            font-weight:bold; 
            text-align:center; 
         } 
         #Article { 
             text-align:center; 
             font-size:50px; 
         } 
    </style> 
</head> 
<body> 
    <div id="DataFlair">DataFlair</div> 
    <div id="Article">E-learning</div> 
</body> 
</html>  

(Here, two divisions with id DataFlair and Article have been created and styled with CSS. ‘#’ is used to access these elements with id).

Output-

html id attribute

Note- The ID of an element must contain at least one character and should be devoid of spaces.

Difference between HTML Class and HTML ID

Each element in an HTML document can have only one unique ID and that ID is used to access that particular element only. On the other hand, multiple elements can have the same class and a single element can belong to multiple classes.

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myId" */
#myId {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "courses" */
.courses {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>
<h1 id="myId">My Courses</h1>
<!-- Multiple similar elements -->
<h2 class="city">HTML5</h2>
<h2 class="city">Python</h2>
<h2 class="city">Machine Learning</h2>
</body>
</html>

Output-

difference between html class and id

HTML Bookmarks

If a web-page is too long, it would be a tedious task to jump to its specific portions. To facilitate this, link bookmarks can be used. For this, the ID of the element is given as the link. For example,

<html> 
<body>  
<p><a href="#T11">Jump to Topic 11</a></p> <!--link the ID in href-->
<p><a href="#T17">Jump to Topic 17</a></p> 
<p><a href="#T20">Jump to Topic 20</a></p> 
<h2>Topic 1</h2> 
<p>paragraph 1 </p> 
<h2>Topic 2</h2> 
<p>paragraph 1 </p> 
<h2>Topic 3</h2> 
<p>paragraph 1 </p> 
<h2>Topic 4</h2> 
<p>paragraph 1 </p> 
<h2>Topic 5</h2> 
<p>paragraph 1 </p> 
<h2>Topic 6</h2> 
<p>paragraph 1 </p> 
<h2>Topic 7</h2> 
<p>paragraph 1</p> 
<h2>Topic 8</h2> 
<p>paragraph 1 </p> 
<h2>Topic 9</h2> 
<p>paragraph 1 </p> 
<h2>Topic 10</h2> 
<p>paragraph 1 </p> 
<h2 id="T11">Topic 11</h2> <!--create an ID-->
<p>paragraph 1 </p> 
<h2>Topic 12</h2> 
<p>paragraph 1 </p> 
<h2>Topic 13</h2> 
<p>paragraph 1 </p> 
<h2>Topic 14</h2> 
<p>paragraph 1 </p> 
<h2>Topic 15</h2> 
<p>paragraph 1 </p> 
<h2>Topic 16</h2> 
<p>paragraph 1 </p> 
<h2 id="T17">Topic 17</h2> 
<p>paragraph 1 </p> 
<h2>Topic 18</h2> 
<p>paragraph 1 </p> 
<h2>Topic 19</h2> 
<p>paragraph 1 </p> 
<h2 id="T20">Topic 20</h2> 
<p>paragraph 1 </p>  
</body> 
</html>  

Output-

html bookmarks

JavaScript and ID Attribute in HTML

In order to perform task on a particular element, ID attribute is useful. The getElementByID() method is used here. For example,

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            #dataflair { 
                font-size:50px; 
                color:blue;
                font-weight:bold; 
                margin-bottom:10px; 
            } 
        </style> 
        <script> 
        function DataFlair() { 
        document.getElementById("dataflair").innerHTML =  
                             "Welcome to DataFlair E-learning"; 
        document.getElementById("dataflair").style.color = "black"; 
    } 
    </script> 
    </head> 
    <body> 
    <div id="dataflair">DataFlair</div> 
    <button onclick="DataFlair()">Text change</button>  
    </body> 
</html>

Output-
Before-

javascript and id attribute

After-

javascript and id attribute in html

HTML Supported Browsers

  • Google Chrome
  • Mozilla
  • Internet Explorer
  • Safari
  • Opera

Summary

The ID attribute in HTML 5 is useful to uniquely identify element. This element can be styled using CSS and dynamic tasks can be performed on it using any scripting language. In this article, we’ve looked at the syntax of ID attributes, accessing it using CSS and JavaScript and using it to create bookmarks. We’ve also discussed the differences between class, and ID attributes of HTML5.

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.