HTML <data> id Attribute

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

Example

#

A unique id attribute on three <data> elements.

  1. The Potato Eaters
  2. Starry Night
  3. Self Portrait
<ol>
  <li><data value="1885" id="43099">The Potato Eaters</data></li>
  <li><data value="1889" id="17660">Starry Night</data></li>
  <li><data value="1889" id="88870">Self Portrait</data></li>
</ol>

Using id

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

The identifier must be unique across the page.

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

Note:  Not all browsers support the <data> element.
Consider using a data-* attribute instead.


Syntax

<data id="identifier" />

Values

#

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

More Examples

Three <data> elements, each with a unique id.
Clicking the numbered buttons will display the year when the related artwork was created.

  1. The Potato Eaters
  2. Starry Night
  3. Self Portrait

<ol>
  <li><data value="1885" id="data-1">The Potato Eaters</data></li>
  <li><data value="1889" id="data-2">Starry Night</data></li>
  <li><data value="1889" id="data-3">Self Portrait</data></li>
</ol><br/>

<button onclick="show('data-1')">1</button>
<button onclick="show('data-2')">2</button>
<button onclick="show('data-3')">3</button>

<script>
  let show = id => {
    let element = document.getElementById(id);
    alert("Year created = " + element.value);
  }
</script>

Code explanation

The id attribute assigns a unique identifier to the <data> element.

Clicking the buttons calls JavaScript which locates the tag with the given id value.

Then JavaScript extracts the data's value (a year) and displays it in an alert box.


Browser support

Here is when id support started for each browser:

Chrome
62.0 Oct 2017
Firefox
22.0 Jun 2013
IE/Edge
13.0 Jan 2020
Opera
49.0 Nov 2017
Safari
Not supported

You may also like

 Back to <data>
Guides