Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
A data-* attribute on a <span> tag attaches additional data to the span element.
To create a custom attribute, replace * with a lowercase string, such as data-id
, data-status
, or data-location
.
A custom data-source
attribute on a <span> tag.
The attribute value is not visible, but is readable by JavaScript.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<article>
<p style="max-width:610px;">
Did you know? The Great Pyramid of Giza was the tallest building in the world
for <span data-source="https://en.wikipedia.org/wiki/History_of_the_world%27s_tallest_buildings">
over 3,800 years</span>,
until the construction of the Lincoln Cathedral in the UK in 1311.
</p>
<article>
The data-* attribute adds custom information to a <span> element.
The * part is replaced with a lowercase string, such as data-id, data-cost, or data-location.
An <span> element can have any number of data-* attributes, each with their own name.
Using data-* attributes reduces the need for requests to the server.
Note: The data-* attribute is not visible and does not change the appearance of the span.
<span data-*="value">
Note: The * can be any string, such as data-id
, data-cost
, data-supplier
, etc.
Value | Description |
---|---|
value | A string value. Can be numeric, alphanumeric, JSON, etc. |
A custom data-reference
attribute on a <span> tag.
Clicking the button will display the reference value.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<article>
<p style="max-width:610px;">
Did you know? The Great Pyramid of Giza was the tallest building in the world
for <span id="myspan"
data-reference="https://en.wikipedia.org/wiki/History_of_the_world%27s_tallest_buildings">
over 3,800 years</span>,
until the construction of the Lincoln Cathedral in the UK in 1311.
</p>
</article>
<br/>
<button onclick="show();">Show data</button>
<script>
let show = () => {
let element = document.getElementById("myspan");
alert("Reference = " + element.getAttribute('data-reference'));
}
</script>
The <span> tag has a custom data-reference
attribute.
The data-reference
attribute stores the reference of the <span> content.
Clicks are handled by the onclick
event.
Onclick invokes a JavaScript function that extracts and displays the element reference.
Note: Notice how the source displays immediately without server call.
Here is when data-* 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 |
Back to <span>