HTML <data> Tag
Concept
The <data> tag in HTML is a unique element that represents a machine-readable translation of a specific piece of content. It’s a way to provide additional information that can be processed by computers, while still being human-readable. This tag can be useful in various applications where data needs to be presented in a structured format.
Implementation
Example 1: Representing a Product Price
Here’s how you can use the <data> tag to represent the price of a product in a machine-readable format:
<p>The price of the new laptop is <data value="1000">$1000</data>.</p>
Example 2: Representing a Date
You can also use the <data> tag to represent a specific date in a machine-readable format:
<p>The release date of the new software is <data value="2023-09-18">September 18, 2023</data>.</p>
Try it out below:
Attributes
Value Attribute
- value: Specifies the machine-readable translation of the content of the element.
Global Attributes
The <data> tag supports all the global attributes in HTML.
Browser Support
| Browser | Support |
|---|---|
| Chrome | 62.0 |
| Firefox | 13.0 |
| Safari | 22.0 |
| Opera | 49.0 |
| IE | Not supported |
Default CSS Settings
Most browsers will display the <data> element without any specific default CSS settings.
Conclusion
The <data> tag offers a semantic way to represent machine-readable information within your content. It’s a versatile tag that can be used in various contexts to provide structured data that computers can easily process while remaining accessible to human readers.
It’s a valuable addition to the toolkit of developers, especially those working on data-driven applications or websites.