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.
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.
<h2>Details</h2> <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
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"> <tr> <th>Name</th> <th>Size</th> </tr> <tr> <td>2014-12-05.bk</td> <td><data value="345634795">329.6 MB</data></td> </tr> <tr> <td>2014-12-20.bk</td> <td><data value="7984634795">7.4 GB</data></td> </tr> <tr> <td>2014-12-31.bk</td> <td><data value="46584634795">43.4 GB</data></td> </tr> </table>
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.
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.