HTML id Attribute
Example
Use the id attribute to manipulate text with JavaScript:
<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult()
{
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| id | Yes | Yes | Yes | Yes | Yes |
Syntax
<element id="id">
Attribute Values
| Value | Description |
|---|---|
| id | Specifies a unique id for the element.
Naming rules:
|
More Examples
Example 1
Use the id attribute to link to an element with a specified id within a page:
<html>
<body>
<h2><a id="top">Some heading</a></h2>
<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>
<a href="#top">Go to top</a>
</body>
</html>
Try it Yourself »
Example 2
Use the id attribute to style text with CSS:
<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">W3Schools is the best!</h1>
</body>
</html>
Try it Yourself »
Related Pages
HTML Tutorial: HTML id
HTML Tutorial: HTML Attributes
CSS Tutorial: CSS Syntax
CSS Reference: CSS #id Selector
HTML DOM Reference: HTML DOM getElementById() Method
HTML DOM Reference: HTML DOM id Property
HTML DOM Reference: HTML DOM Style Object
