The HTML <data> element represents machine-readable data. This element provides metadata for computers, such as data for search engines or other processing tools.
You can use the <data> tag with scripts on a web page when a script has a literal value to store alongside a human-readable value. The format used depends only on the needs of the script.
Syntax
1 | <datavalue="value">data</data> |
The value attribute specifies the value of the data. The content of the <data> element is the human-readable version of the data.
Examples
Here’s a basic example of the <data> element.
1 | <p>The total revenue for Q1 2021 was $<datavalue="50000">50,000</data>.</p> |
Here’s another example using JavaScript; it fetches the current Bitcoin price in $USD and displays the updated price with each page refresh.
Syntax
1 | <divclass="container"> |
2 | <p>The current price of Bitcoin is: <dataid="bitcoin-price"></data> USD</p> |
3 | </div> |
Result
Attributes
The <data> element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much effect on some).
The <data> element specifically supports the following attribute:
value: Specifies the value of the data.
Content
The <data> element can contain any text that provides a human-readable version of the data. This content is optional, as the data can be specified entirely through the value attribute.
Did You Know?
- The
<data>element is often used with CSS to hide machine-readable data from human users while making it accessible to machines. - The
<data>element is similar to the<meta>element, which provides metadata about the HTML document.
Learn More
- To learn more about the
<data>element, read the official HTML specification.
