THE WORLD'S LARGEST WEB DEVELOPER SITE

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:
  • Must contain at least one character
  • Must not contain any space characters

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