HTML Id
An HTML element’s unique id can be specified using the HTML id property.
In an HTML document, you cannot have several elements with the same id.
Using The id Attribute
The HTML element’s unique id is specified by the id property. Within the HTML document, the id attribute’s value needs to be distinct.
In a style sheet, the id attribute is used to link to a particular style declaration. JavaScript uses it as well to access and modify the element that has the given id.
The hash character (#) and the id name are the required fields in the id syntax. Next, specify the CSS attributes enclosed in curly brackets {}.
An <h1> element pointing to the id name “myHeader” is seen in the example below. The <h1> element will be formatted in accordance with the head section’s #myHeader style definition:
Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: blue;
color: white;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Note: There is case sensitivity in the ID name!
Note: There cannot be a number at the beginning of the ID name, and whitespaces (spaces, tabs, etc.) are not allowed.
Difference Between Class and ID
While an id name can only be used by one HTML element on the page, a class name can be used by several HTML elements:
Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: blue;
color: white;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: yellow;
color:red;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">Toronto</h2>
<p>London is the capital of England.</p>
<h2 class="city">Delhi</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
HTML Bookmarks with ID and Links
With HTML bookmarks, users may navigate to particular sections of a webpage with ease.
If your page is particularly long, you may find bookmarks helpful.
You have to make a bookmark and then add a link to it in order to use it.
The website will then scroll to the bookmark’s location when the link is clicked.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:
Example
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark (“Jump to Chapter 4”), from another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Using The id Attribute in JavaScript
JavaScript can also use the id attribute to carry out certain actions for that particular element.
JavaScript’s getElementById() function allows it to access an element with a given id:
Example
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Chapter Summary
- The id attribute is used to specify a unique id for an HTML element
- The value of the id attribute must be unique within the HTML document
- The id attribute is used by CSS and JavaScript to style/select a specific element
- The value of the id attribute is case sensitive
- The id attribute is also used to create HTML bookmarks
- JavaScript can access an element with a specific id with the getElementById() method
HTML id
unique identifier
CSS selector
JavaScript access
HTML bookmarks
id attribute
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML id attribute is a crucial element in web development, serving as a unique identifier for HTML elements. This attribute allows you to target specific elements on a web page using CSS selectors and JavaScript.
The id attribute is used to provide a unique name for an HTML element, which can be helpful for a variety of purposes. For example, you can use the id to create bookmarks within a web page, allowing users to quickly navigate to specific sections. Additionally, the id can be used as a CSS selector to apply unique styles to an element, or as a JavaScript variable to interact with the element programmatically.
When assigning an id to an HTML element, it’s important to ensure that the value is unique within the document. This is because the id attribute is designed to be a unique identifier, and using the same id for multiple elements can lead to unexpected behavior.
Overall, the HTML id attribute is a powerful tool for web developers, enabling them to target and manipulate specific elements on a web page with precision and efficiency.
The HTML id attribute is a unique identifier that can be assigned to an HTML element. It serves several important purposes in web development:
CSS Selector: The id attribute can be used as a CSS selector to target and style specific elements on a web page. This allows for precise and customized styling.
JavaScript Access: JavaScript can easily access and manipulate elements on a page using their unique id. This is especially useful for adding interactivity and dynamic behavior.
HTML Bookmarks: The id attribute can be used to create internal page bookmarks, allowing users to quickly navigate to specific sections of a long web page.
Unique Identifier: Each id value on a page must be unique. This ensures that elements can be distinctly referenced and identified within the HTML document.
Overall, the HTML id is a powerful tool that enables developers to target, style, and interact with specific page elements in a variety of ways. Understanding how to properly utilize the id attribute is an essential skill for any web developer.
