HTML is a markup language that allows us to create web pages with different types of content. However, not all content is equally understandable by both humans and machines. For example, how can we tell a machine what a date, a currency, or a rating means? How can we make our web pages more accessible and semantic?
This is where the <data> element comes in handy. The <data> element is a new addition to HTML5 that lets us add a machine-readable translation of a given content. This way, we can provide both a human-readable value for rendering in a browser, and a machine-readable value for data processors, such as screen readers, search engines, or web crawlers.
In this blog, we will explore the use cases, syntax, and benefits of the <data> element. We will also see some examples of how to use it in our web pages. By the end of this blog, you will have a better understanding of what the <data> element is used for in HTML, and how to use it effectively.
Introduction to the <data> element
The <data> element is a new HTML5 element that allows us to add a machine-readable translation of a given content. The <data> element has two attributes: value and type. The value attribute specifies the machine-readable value of the content, while the type attribute indicates the type of the value, such as a date, a currency, or a rating. The content of the <data> element is the human-readable value that is displayed in the browser.
The syntax of the <data> element is as follows:
The <data> element is used to add a machine-readable translation of a given content. This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser. For example, you can use the <data> element to display a currency value in a human-readable format, while providing the machine-readable value in the value attribute:
<p>
The price is: <data value="39.95">US$39.95</data>
</p>- You can learn more about the
<data>element from this tutorial.
The <data> element can be used inside other elements, such as <p>, <li>, <span>, or <div>, to add semantic meaning and accessibility to the content. The <data> element can also be styled with CSS, just like any other HTML element.
The <data> element is useful for several reasons:
- It makes the web page more accessible for users who rely on assistive technologies, such as screen readers, to access the content. The screen readers can read the machine-readable value and the type of the content, and provide the appropriate feedback to the user.
- It makes the web page more semantic and structured for data processors, such as search engines, web crawlers, or data analysis tools. The data processors can extract the machine-readable value and the type of the content, and use them for indexing, ranking, filtering, or displaying the web page.
- It makes the web page more consistent and maintainable for web developers, who can use the
<data>element to store and manipulate the data values in a standardized way, without relying on custom attributes or hidden elements.
Sample 1
The <data> element is used to link a given piece of content with a machine-readable translation. For instance, if you have a product with a price, you can use the <data> element to store the price value.
Why we use <data> element to store the price?
Using the <data> element to store the price of a product in an HTML document offers several advantages, especially when it comes to semantically meaningful markup and interaction with JavaScript:
- Semantic Meaning: The
<data>element provides a way to include machine-readable data (like prices, identifiers, etc.) in a human-readable way within your HTML. This is particularly useful for data that has both a human-readable format and a value that can be used programmatically. For example, a price might be displayed as “USD 799” for readers, but the numeric value “799” can be used in scripts. - Accessibility and SEO: Semantic HTML is beneficial for accessibility and search engine optimization (SEO). Screen readers and other assistive technologies can interpret the data more accurately when it’s semantically structured, which helps users with disabilities. Similarly, search engines can better understand and index the content of your webpage.
- Ease of Manipulation with JavaScript: Storing the price in a
<data>element makes it easy to access and manipulate this value with JavaScript. You can easily retrieve, modify, or calculate new values based on this data. For example, converting the price from one currency to another, as shown in the sample project, becomes straightforward. - Maintainability: When your data is separated from your presentation, it makes your code more maintainable. If you need to change the way the price is displayed or processed, you can do so without altering the underlying data structure.
- Custom Data Attributes: While custom data attributes (
data-*) are commonly used for embedding custom data, the<data>element specifically indicates that its contents represent a machine-readable equivalent of the content. This can be more intuitive when you’re dealing with direct representations like prices, dates, or measurements.
The <data> element is a valuable tool in modern HTML for clearly and effectively associating readable text with machine-readable data, enhancing the functionality, accessibility, and maintainability of web content.
Here’s a simple example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Data Element Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Product Catalog</h1>
<div class="product-container">
<div class="product">
<h2>Smartphone</h2>
<p>Price: <data value="799">$799</data></p>
<button id="showPrice">Show Price in Euro</button>
</div>
<div class="product">
<h2>Tablet</h2>
<p>Price: <data value="899">$899</data></p>
<button id="showPrice">Show Price in Euro</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
body {
font-family: Arial, sans-serif;
margin: 10px;
}
.product {
background-color: #f2f2f2;
padding: 20px;
border-radius: 8px;
width: 300px;
margin: auto;
}
.product-container div {
margin: 10px;
}
.product p {
line-height: 2;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}JavaScript
document.getElementById('showPrice').addEventListener('click', function () {
let dataElement = document.querySelector('data');
let priceInUSD = parseInt(dataElement.getAttribute('value'));
let priceInEuro = (priceInUSD * 0.9).toFixed(2); // Assuming 1 USD = 0.9 Euro
alert(`Price in Euro: € ${priceInEuro}`);
});