Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

HTML id Attribute


Use the id attribute to manipulate text with JavaScript:


<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";

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

id Yes Yes Yes Yes Yes


<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:


<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>

Try it Yourself »

Example 2

Use the id attribute to style text with CSS:

#myHeader {
  color: red;
  text-align: center;

<h1 id="myHeader">W3Schools is the best!</h1>

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