HTML <h1>-<h6> id Attribute

The id attribute on a <h1>-<h6> tag assigns an identifier to the section heading element. The identifier must be unique across the page.

Example

#

An id attribute on an <h3> element.

The Origins of HTML

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

<article>
  <h3 id="article-heading">The Origins of HTML</h3>
  <p>
    In 1980, physicist Tim Berners-Lee, a contractor at 
    CERN, proposed and prototyped ENQUIRE, a system for 
    CERN researchers to use and share documents. In 1989, 
    Berners-Lee wrote a memo proposing an Internet-based 
    hypertext system. Berners-Lee specified HTML and wrote 
    the browser and server software in late 1990. 
  </p>
</article>

Using id

The id attribute assigns an identifier to the <h1> to <h6> elements.

The identifier must be unique across the page.

The id allows programmatic access to the <h1> to <h6> elements.

Tip:  id is a global attribute that can be applied to any HTML element.


Syntax

<h1 | h2 | h3 | h4 | h5 | h6 id="identifier" />

Values

#

Value Description
identifier A unique alphanumeric string. The id value must begin with a letter ([article-Zarticle-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

More Examples

A <h3> element with a unique id.
Clicking the button displays the heading text.

The California Gold Rush

The California Gold Rush (1848–1855) was a gold rush that began on January 24, 1848, when gold was found by James W. Marshall at Sutter's Mill in Coloma, California. The news of gold brought approximately 300,000 people to California from the rest of the United States and abroad.


<article>
  <h3 id="myheading">The California Gold Rush</h3>
  <p>
    The California Gold Rush (1848–1855) was a gold 
    rush that began on January 24, 1848, when gold was 
    found by James W. Marshall at Sutter's Mill in Coloma, 
    California. The news of gold brought approximately 
    300,000 people to California from the rest of the 
    United States and abroad.
  </p>
</article>

<br/>
<button onclick="show();">Show heading</button>

<script>
  let show = () => {
    let element = document.getElementById("myheading");
    alert("Heading = " + element.innerHTML);
  }
</script>

Code explanation

The id attribute assigns a unique identifier for the <h3> element.

Clicking the button calls JavaScript which locates the <h3> using the id.

Finally, the content of the <h3> element is displayed in an alert box.


Browser support

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

You may also like

 Back to <h1 to h6>
Guides