HTML ID Attribute – Allowed Characters, Syntax, Rules

Welcome to a quick tutorial on the HTML ID attribute. By now, you should have already used the ID attribute. But there should be many burning questions in mind – Can the ID contain numbers? Dots? Punctuations? Spaces? Can we attach multiple IDs? Can we attach an ID to script tags? Which tags cannot have an ID?

To quickly answer the naming rules and syntax of the ID attribute –

  • The HTML ID attribute is case-sensitive.
  • We cannot define multiple IDs on the same element, only the first ID will be registered.
  • We cannot have duplicate IDs. If multiple elements share the same ID, only the first one will be registered.
  • All characters are allowed for the HTML ID attribute, except for white spaces.
  • We can attach an ID to all HTML elements, except for the <!DOCTYPE>, which is not considered to be an HTML tag.

That covers the quick basics, but let us walk through some actual examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes HTML ID Syntax Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

HTML ID SYNTAX RULES

Now for the star of the show – The HTML ID attribute.

 

1) HTML ID IS CASE SENSITIVE

1-case-sensitive.html
<!-- (A) HTML -->
<div id="HelloWorld">First</div>
<div id="helloworld">Second</div>
 
<!-- (B) ID IS CASE SENSITIVE -->
<script>
var first = document.getElementById("HelloWorld");
console.log(first); // <div id="HelloWorld">
var second = document.getElementById("helloworld");
console.log(second); // <p id="helloworld">
</script>

Yes, the HTML id is case-sensitive. HelloWorld and helloworld are 2 different values.

 

2) MULTIPLE ID NOT ACCEPTED

2-multiple-id.html
<!-- (A) MULTIPLE ID -->
<div id="first" id="second">First</div>
 
<!-- (B) ONLY FIRST IS REGISTERED -->
<script>
var el = document.getElementById("first");
console.log(el); // <div id="first">
el = document.getElementById("second");
console.log(el); // null
</script>

As in the above introduction, an HTML element cannot have multiple id, only the first one will be registered.

 

 

3) CANNOT HAVE DUPLICATE ID

3-duplicate-id.html
<!-- (A) DUPLICATE ID -->
<div id="HelloWorld">First</div>
<p id="HelloWorld">Second</p>
 
<!-- (B) ONLY THE FIRST WILL BE REGISTERED -->
<script>
var el = document.getElementById("HelloWorld");
console.log(el); // <div id="HelloWorld">
</script>

When there are multiple elements with duplicated id, only the first element will be registered.

 

4A) ALL CHARACTERS ARE ACCEPTED EXCEPT WHITE SPACE

4A-all-char.html
<!-- (A) HTML -->
<h1>NO RESTRICTIONS ON ID</h1>
<div id="HelloWorld">Alphabets only</div>
<div id="1234567890">Numeric only</div>
<div id="Foo123Bar">Alphanumeric</div>
<div id="Doge-good+boye">Alphanumeric with symbols</div>
<div id="#!@#$%^&*()_+">Symbols only</div>
<!--
<h1>THE ONLY NO-NO IS WHITE SPACE</h1>
<div id="bad id">Invalid ID</div>
-->
 
<!-- (B) JAVASCRIPT -->
<script>
console.log(document.getElementById("HelloWorld"));
console.log(document.getElementById("1234567890"));
console.log(document.getElementById("Foo123Bar"));
console.log(document.getElementById("Doge-good+boye"));
console.log(document.getElementById("#!@#$%^&*()_+"));
</script>

The id attribute does not have any restrictions on the characters, except for white spaces –

  • An alphanumeric id is recommended.
  • An id with numbers only will also work, but not really recommended.
  • All kinds of funky symbols also work, but the usage is highly discouraged.

 

 

4B) WHY ARE NUMBERS & SYMBOLS BAD?

4B-bad-for-css.html
<!-- (A) CSS -->
<style>
/* (A1) ALPHANUMERIC ID - GOOD */
#HelloWorld, #Foo123Bar { font-weight: bold; }
 
/* (A2) NUMBER & SYMBOLS - CONFUSES CSS
#1234567890, #Doge-good+boy, ##!@#$%^&*()_+ {
font-weight: bold;
}*/

/* (A3) NEED TO ESCAPE THE CHARACTERS TO STYLE */
#Doge\-good\+boye { font-weight: bold; }
</style>

<!-- (B) HTML -->
<!-- (B1) GOOD, CAN BE STYLED EASILY -->
<div id="HelloWorld">Alphabets only</div>
<div id="Foo123Bar">Alphanumeric</div>
 
<!-- (B2) BAD -->
<div id="Doge-good+boye">Alphanumeric with symbols</div>
<div id="1234567890">Numeric only</div>
<div id="#!@#$%^&*()_+">Symbols only</div>

So, just why are numbers and symbols discouraged? While HTML is cool with funny characters, but CSS is not. For example, the greater sign > is used to target the child elements in CSS; If an id contains >, that will confuse CSS. To “fix” this problem, we will have to escape every symbol – This is just very inconvenient to do so.

 

5) ALL HTML ELEMENTS CAN HAVE AN ID

5-id-element.html
<!DOCTYPE html>
<html id="page_html">
  <head id="page_head">
    <title id="page_title">HTML ID Syntax Rules</title>
    <meta name="description" content="Testing meta tag" id="page_link_meta">
    <link rel="stylesheet" type="text/css" href="theme.css" id="page_link_style">
  </head>
  <body id="page_body">
    <script id="page_script">
    var el = document.getElementById("page_html");
    console.log(el); // Yes
    el = document.getElementById("page_head");
    console.log(el); // Yes
    el = document.getElementById("page_title");
    console.log(el); // Yes
    el = document.getElementById("page_link_meta");
    console.log(el); // Yes
    el = document.getElementById("page_link_style");
    console.log(el); // Yes
    el = document.getElementById("page_body");
    console.log(el); // Yes
    el = document.getElementById("page_script");
    console.log(el); // Yes
    </script>
  </body>
</html>

All HTML tags are allowed to have an id, with the exception of the <!DOCTYPE> itself – Which is not considered to be an HTML tag.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

HTML ID Syntax (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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