An id on a <data> tag assigns an identifier to the data element.
The identifier must be unique across the page.
A unique id attribute on three <data> elements.
<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>
The id attribute assigns an identifier to the <data> element.
The id allows JavaScript to easily access the <data> element.
It is also used to point to a specific id selector in a style sheet.
Note: Not all browsers support the <data> element.
Consider using a data-* attribute instead.
<data id="identifier" />
| 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 (.). |
Three <data> elements, each with a unique id.
Clicking the numbered buttons will display the year when the related artwork was created.
<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>
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.
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 |
Back to <data>
