An id on a <div> tag assigns an identifier to the div element.
The identifier must be unique across the page.
A unique id attribute on a <div> element.
Eugène Henri Paul Gauguin, was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<div id="gaugain">
<h4>Paul Gauguin</h4>
<p>
Eugène Henri Paul Gauguin, was a French Post-Impressionist artist.
Unappreciated until after his death, Gauguin is now recognized for
his experimental use of color and Synthetist style that were
distinct from Impressionism. Toward the end of his life, he
spent ten years in French Polynesia. The paintings from this
time depict people or landscapes from that region.</p>
</div>
The id attribute assigns an identifier to the <div> element.
The id allows JavaScript to easily access the <div> element.
It is also used to point to a specific id selector in a style sheet.
Tip: id is a global attribute that can be applied to any HTML element.
<div id="identifier" >
| Value | Description |
|---|---|
| identifier | A unique alphanumeric string. The id value must begin with a letter ([a-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). |
A <div> tag with a unique id.
Clicking the button will display the element's content.
Eugène Henri Paul Gauguin, was a French Post-Impressionist artist. Unappreciated until after his death, Gauguin is now recognized for his experimental use of color and Synthetist style that were distinct from Impressionism. Toward the end of his life, he spent ten years in French Polynesia. The paintings from this time depict people or landscapes from that region.
<div id="mydiv">
<h4>Paul Gauguin</h4>
<p>
Eugène Henri Paul Gauguin, was a French Post-Impressionist artist.
Unappreciated until after his death, Gauguin is now recognized for
his experimental use of color and Synthetist style that were
distinct from Impressionism. Toward the end of his life, he
spent ten years in French Polynesia. The paintings from this
time depict people or landscapes from that region.
</p>
</div>
<br />
<button onclick="show();">Show div content</button>
<script>
let show = () => {
let element = document.getElementById("mydiv");
alert("Content = " + element.innerHTML);
}
</script>
The id attribute assigns a unique identifier to the div.
Clicking the button calls JavaScript which locates the div using the id.
Finally, the content of the div is displayed in an alert box.
Here is when id support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
Back to <div>
