<data>

Definition

The HTML data element is used to store data that is private to the page or application, and is not meant to be displayed to the user. It can be used to store data that is relevant to a specific element on the page, such as the data needed to create a chart or a form input.

Examples

<ul>
	<li><data value="3245">Laptop Computer</li>
	<li><data value="4346">Gaming Mouse</li>
	<li><data value="7832">Mechanical Keyboard</li>
</ul>

In the example above, item numbers correspond with specific products.

Attributes

Best Practices

• Using the data element to store data that is private to the page or application, and not meant to be displayed to the user.
• Giving the data element a value that accurately describes the data it contains.
• Using the data element in conjunction with other elements, such as charting libraries or form inputs, to provide a more user-friendly and interactive experience.

Accessibility Considerations

The HTML data element can be used to provide additional information about an element, but it is not typically used for conveying information that is essential for understanding the content of the page. Therefore, it is important to consider the accessibility of the data element when implementing it.

To ensure accessibility, it is recommended to provide an alternative way of accessing the information in the data element. This can be done through the use of aria-labelledby or aria-describedby attributes, which can be used to associate the data element with another element that provides a label or description of the data.

Additionally, it is important to avoid using the data element to hide information that is essential for understanding the content of the page. This can be confusing and inaccessible for users who rely on assistive technologies, such as screen readers, to access the content.

Browser Compatibility