data element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.


The data element allows authors to provide a machine-readable version for its contents. Such codification must be provided in the required attribute value. This element can be useful in situations where there's a need to facilitate the access or interacction of scripts with the document's content.

To provide machine-readable versions of a date or time measure, authors should use the more specific time element, which has the same function but only for this particular type of content.


In the next example, the data element is wrapping the name of a product, its price and warranty period, in order to provide their machine-readable versions (the barcode, the price in numbers only and the the warranty in months). All this information is provided inside the value attribute of each element, so the rendered document is unchanged.

This could be designed, for example, to help a script process products' information in the document.

<p>Product: <data value="21354860684">Full HD LED TV</data><br>
Price: <data value="554">$554,00 (USD)</data><br>
Warranty: <data value="24">2 years</data></p>


Product: Full HD LED TV
Price: $554,00 (USD)
Warranty: 2 years

Now, the data element is used to provide machine-readable versions for file sizes in a table. As the human-readable versions are expresed in different units in order to improve readability, this could be particularly useful, for example, for scripts assigned to order the table rows by file size.

<h2>Backup files</h2>
<table class="default">
    <td><data value="345634795">329.6 MB</data></td>
    <td><data value="7984634795">7.4 GB</data></td>
    <td><data value="46584634795">43.4 GB</data></td>

Backup files

Name Size
2014-12-05.bk 329.6 MB
2014-12-20.bk 7.4 GB
2014-12-31.bk 43.4 GB


Specific attributes


A machine-readable version of the element's contents. The presence of this attribute is required.


<p>This year the production reached a peak of <data value="21.43">approximately 21 Tons</data>.</p>

This year the production reached a peak of approximately 21 Tons.

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.


Global events

For information about global events refer to this list of global events in HTML5.