HTML ID Attribute

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

The HTML Id attribute links a specific unique id with an HTML element. The id attribute is explicitly used for defining a part uniquely. Since the attributes are unique, the elements are used to point to a specific property on the style sheets and even are used by Javascript to access and manipulate the data using the particular id attribute. 

 

 

Let’s understand more about the id attribute by looking into the uses and the different elements we can style and create using it. 

 

Properties of the Id attribute

The id attribute, as we specified, is used to link an element to specify a unique style or even add some functionality using Javascript. There can be various other reasons we use the HTML ID attribute. We have made a list of these uses, with detailed examples for each of those. 

  • The ID attribute allows us to specify an element with a unique identity. 
  • The ID attribute values are case-sensitive.
  • The ID values must have at least one character
  • The ID values must not contain any white spaces. 

 

The syntax for ID attribute in HTML is:

<html_element id="value">

 

Using the ID Attribute with CSS

In the example, we have used the id attribute to add styles to the particular elements.

We have used internal CSS to illustrate the use of the id #codingninja attribute. To use the id attribute in CSS, the syntax is:

#id_value {property:value; ...}

 

Observe the below example to understand the working of the id attribute better. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ninja learns id attribute</title>
    <style>
        #codingninja{
            font-weight: bold;
            text-decoration: underline;
            color: rgb(28, 44, 134);
        }
    </style>
</head>
<body>
    <div id="codingninja">
        Hey Ninja!
    </div>
</body>
</html>

 

OUTPUT

Using the ID attribute with Javascript

We know that HTML and CSS are used for providing a stylish structure to the webpage. The functionality of a webpage is defined using Javascript. The id attribute is used with Javascript to provide the functionality to certain elements. We have specific select predefined javascript methods which are used to fetch the id elements. The syntax of the primary Javascript method which conveys the id attribute is as follows:

<script>
document.getElementById("id").{operation}"value";
</script>

 

 

Let’s understand the working of the document.getElementByID using an example,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ninja learns id attribute</title>
</head>
<body>
    <h2 id="codingninja"> Coding Ninja </h2>
    <button onclick="function1()"> Click me to see the magic </button>    
</body>

<script>
function function1()
{
    document.getElementById("codingninja").innerHTML = "Happy Learning Ninja ✨";
}
</script>
</html>

 

OUTPUT

  

In the above example, when we press the button, the onclick event is targeted using the codingninja heading attribute, which changes the text. 

We have seen elaborate examples for both of the standard use cases of HTML id attribute, styling using CSS, and adding functionality to the website using Javascript. 

Using the ID Attribute to create Bookmarks

In HTML, if a webpage or a topic is long enough to take pages, to make the content easily accessible, we have the option of using the HTML bookmarks. Even in this article, the content is easily accessible for you to read by providing the hyperlinks of the headings using the id attribute on the table of contents.

Observe by pointing to each topic you can access that easily and take you directly to the heading you want to read. 

ID attribute allows you to have a unique reference to a particular element. We use this property of the id attribute and make links on the href attribute to create an HTML Bookmark. Let’s understand this by an example, 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ninja learns bookmarks </title>
</head>
<html>
<body>  
<p>
    <a href="#TD3">Ninja wants a Jump to Topic 3</a>
</p> <!--link the ID in href-->
<p>
    <a href="#TD7">Ninja wants a Jump to Topic 7</a>
</p>
<p>
    <a href="#TD10">Ninja wants a Jump to Topic 10</a>
</p>
<h2>Topic 1</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 2</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2 id="TD3">Topic 3</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 4</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 5</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 6</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2 id ="TD7">Topic 7</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 8</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2>Topic 9</h2>
    <p>Using the ID Attribute to create Bookmarks </p>
<h2 id="TD10">Topic 10</h2>
    <p>Using the ID Attribute to create Bookmarks </p>  
 
</body>

</html>

 

Observe when you click on the first link that points to Topic 3, you are automatically redirected to Topic 3’s content and you do not even have to scroll for the same.

We have discussed the uses for the id attribute with illustrative examples, but the next question that comes to mind is the difference between the Id attribute and the class attribute and how we would know which one should be used.

Difference between ID attribute and the class attribute

The significant difference between the id and class attributes is that a particular element could have only one id attribute. Still, we can have many class attributes associated with one element. 

This means you can assign multiple classes to an element, but you can assign only one id attribute.

Let’s understand this by an example,

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

/* Style all elements with the class name "city" */
.learn {
  background-color: tomato;
  color: white;
  padding10px;

</style>
</head>
<body>

<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<!-- An element with a unique id -->
<h1 id="myHead">Ninja Activity</h1>

<!-- Multiple elements with same class -->
<h2 class="learn">Learn HTML</h2>
<p>Ninja Learn HTML</p>

<h2 class="learn">Learn CSS</h2>
<p>Ninja Learns CSS</p>

<h2 class="learn">Learn JS</h2>
<p>Ninja Learns JS</p>

</body>
</html>

 

OUTPUT

Frequently Asked Questions

Q1. What is the HTML ID attribute?
Ans: The HTML ID attribute is a global attribute used to identify a unique element in the HTML web page. The primary purpose of the ID attribute is to identify a particular component and add styling or functionality to it using CSS and Javascript, respectively.
 

Q2. Can an HTML ID be a numerical value?
Ans: Since the up-gradation with HTML5, we can use any character for naming an id attribute. The only condition is that the ID attribute should contain at least one character. This means it cannot be empty. You can include letters ([A-Za-z]), digits ([0-9]), hyphens (-), underscores (_), colons (:), periods (.), hash(#), dollar(#) and many such characters available to you. 

Q3. What is the critical difference between using a class attribute and an id attribute in HTML?
Ans: Let’s map the difference out for these two attributes,

Key Difference 

ID Attribute

Class Attribute

Syntax 

In the HTML ID attribute, we use the element the ‘#’ symbol followed by a unique name. On the other hand, the class attribute names start with a ‘.’ representation in the CSS.

Selector 

We can attach only one ID selector with an element. We can attach multiple class selectors with an element. 

Uniqueness

The ID attribute is unique to represent one element at most in the HTML web page. We can represent the Class attribute to multiple elements on the same HTML document. 

 

Key Takeaways

This article has covered all the essential properties you need to know about the HTML ID attribute. The Id attribute is a global attribute used to identify a unique element in the HTML web page. The primary purpose of the ID attribute is to identify a particular element and add styling or functionality to it using CSS and Javascript, respectively. In the article, we have discussed various use cases of the id attribute using descriptive examples. 

Are you excited to learn more? We have provided a fantastic Web Development course for you, and we feel it could be the perfect aid to make you better than the rest of the developers.  
Happy Learning Ninjas!
 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think