HTML <span> data-* Attribute

The data-* attribute on a <span> tag attaches additional data to the span element. To create a custom attribute, replace the * with a lowercase string, such as data-id, data-status, or data-location.

Example

#

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>

Using data-*

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.


Syntax

<span data-*="value">

Note: The * can be any string, such as data-iddata-costdata-supplier,  etc.


Values

#

Value Description
value A string value. Can be numeric, alphanumeric, JSON, etc.

More Examples

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>

Code explanation

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.


Browser support

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

You may also like

 Back to <span>
Guides