HTML <data> Tag
The <data> tag is used to link the content with its machine-readable analogue. Description of the tag, attributes and usage examples.
The <data> tag is an element in HTML5.1. The tag is used to define a machine-readable analogue for the specified data (a standardized version, understandable to automated systems or scripts on the website).
This may be useful in cases when the data should be in a particular format necessary for running scripts, but you don’t want your users to see this format. For example, you want to display a list of products for your users to choose from. Each product has its ID, but you don’t want to show this information to your users. Then you place the product IDs in the <data> tag, and the machine will process this information and show users the product with the corresponding ID.
The <data> tag uses the value attribute to store a machine-readable version of its content. This allows scripts to process the underlying value while displaying different text to users.
The visible content inside the <data> tag should be descriptive, as assistive technology may not read the value attribute. Besides, the value attribute may not be indexed by search crawlers.
We recommend using the <time> tag if the value is date or time related.
Syntax
The <data> tag comes in pairs. The content is written between the opening (<data>) and closing (</data>) tags.
Example of the HTML <data> tag:
HTML <data> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Refrigerated drinks</p>
<ul>
<li>
<data value="1545325112">Coca-Cola 500ml</data>
</li>
<li>
<data value="1545325113">Coca-Cola 330ml</data>
</li>
<li>
<data value="1545325114">Coca-Cola Light 330ml</data>
</li>
</ul>
</body>
</html>Result
Attributes
| Attribute | Value | Description |
|---|---|---|
| value | machine-readable format | Sets the machine-readable version of the contents of the <data> tag. |
The <data> tag also supports the Global Attributes and the Event Attributes.
Practice
What is the use of the <data> tag in HTML and what does it represent?