HTML <time> id Attribute

The id attribute on a <time> tag assigns an identifier to the time element. The identifier must be unique across the page.

Example

#

An id attribute on a <time> tag.

Vincent Van Gogh was born , in Zundert, the Netherlands.
He died , (age 37) in Auvers-sur-Oise, France.

<article>
  <p>
    Vincent Van Gogh was born 
    <time id="birthdate" datetime="1853-03-30">March 30, 1853</time>,
    in Zundert, the Netherlands.<br />He died 
    <time datetime="1890-07-29">July 29, 1890</time>,
    (age 37) in Auvers-sur-Oise, France. 
  </p>
</article>

Using id

The id attribute assigns an identifier to the <time> element.

The identifier must be unique across the page.

The id allows programmatic access to the <time> element.

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


Syntax

<time id="identifier" />

Values

#

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

More Examples

A <time> element with a unique id.
Clicking the button displays the content of the first <time> element.

Vincent Van Gogh was born , in Zundert, the Netherlands.
He died , (age 37) in Auvers-sur-Oise, France.


<article>
  <p>
    Vincent Van Gogh was born 
    <time id="mytime" datetime="1853-03-30">March 30, 1853</time>,
    in Zundert, the Netherlands.<br />He died 
    <time datetime="1890-07-29">July 29, 1890</time>,
    (age 37) in Auvers-sur-Oise, France. 
  </p>
</article>
  
<br />
<button onclick="show();">Show time content</button>

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

Code explanation

The id attribute assigns a unique identifier for the time.

When the button is clicked, JavaScript locates the time through the id.

It extracts the <time> content and displays it in an alert box.


Browser support

Here is when id support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

 Back to <time>
Guides