HTML Id Attribute and Its Rules: [Step By Step] Guide To All

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:6 mins read
You are currently viewing HTML Id Attribute and Its Rules: [Step By Step] Guide To All

The HTML id attribute is used to select an HTML element with a unique identification to add extra style or events. This identification must be unique, you can not define the same value to the id attribute in a document.

In this post, you are going to learn the HTML id attribute rule, how to use the id attribute in HTML, and you can also learn how to create a bookmark with help of the id attribute.

One more thing, The id attribute represents in CSS by the “#(hash)” character. And it represents in JavaScript by the “getElementById” keyword.

HTML Id Attribute Rules

When you are using the HTML id attribute, here is a set of rules. HTML previous version like HTML 4 or XHTML the rule was very complicated. In XHTML id attribute was case sensitive and this value must start with a letter. Similarly in HTML 4 id attribute must start with a letter and after it can contain any special character colon(:) period(.) and underscore(_) and so on.

But in HTML 5 id attribute has simple set of rules.

  • The id attribute value must unique in the document. You can not define the same attribute value for two-element in one document. Otherwise, you can face an error.
  • Secondly, this attribute value must contain at least one or more characters (including special characters).
  • The id attribute value can not contain any space character. It is so important, so remember it.

Difference Between Id And Class

There are no major differences between the HTML class attribute and the id attribute expected the uniqueness. As similar to the id attribute the class attribute must contain at least one character including special characters. And an HTML element can represent two different class names, which is not possible in the id attribute.

But if the class attribute contains any space between its value, then it will represent two different names. If you want to learn more about class attribute you can check the class attribute tutorial

HTML id attribute – with css

When you style an element with the help of id attribute its represents with the “#” symbol.

Example

<!DOCTYPE html>
<html>
<style>
#para1{
color:red;
}
</style>
<head>
<body>
<p id="para1"> Paragraph 1</p>
<p< Paragraph 2</p>
</body>
</head>
</html>

Paragraph 1

Paragraph 2

Id attribute – With JavaScript

HTML id attribute can also be used with JavaScript to perform certain tasks with the specific elements. JavaScript access the specific element through the id attribute by getElementById() method.

JavaScript will manipulating the text of the <p> tag through the id attribute.

Example

<!DOCTYPE html>
<html>
<script>
 function test(){
 document.getElementById("para1").innerHTML=
"This paragraph has changed by JavaScript";
    }
 </script>
<head>
<body>
<p id="para1"> Paragraph 1</p>
<p> Paragraph 2</p>
<button type="button" onclick="test()">click me</button>
</body>
</head>
</html>

Paragraph 1

Paragraph 2

Creating Bookmark

The id attribute is mostly used for creating bookmarks. When a webpage is so long then it is very hard for a user to go to the right place. Or you want to jump a user one document to other documents specific part through a hyper-link. Then you can bookmark every element with the id attribute.

<a href=#part1> See about Sun</a>
<a href=#part2> See about Earth</a>
<a href=#part3> See about Moon</a>


<h1 id="part1">The Sun</h1>
  <p> About the Sun...</p>
<h1 id="part2">The Earth</h1>
  <p> About the Earth...</p>
<h1 id="part3">The Moon</h1>
  <p> About the Moon...</p>

If you want to send your user from one document to another document specific section then follow the below technique.

Example

Go to our privacy policy page <a href="https://sitecodings.com/privacy-policy/#rights">rights of user</a> section

Go to this website privacy policy page rights of user section.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply