I stand up for children in need. Please join me in helping this family.

Skip to content
Steven Roland

Data Element: Associating Machine-Readable Data

The <data> HTML element is used to associate a machine-readable value with a piece of content, providing a way to embed custom data attributes within visible content. This element is particularly useful for applications where you need to display human-readable content while also associating it with a value that can be processed by scripts or other automated systems. The <data> tag can be used in scenarios such as tagging, data visualization, or any context where additional data needs to be stored alongside the displayed content.

The primary attribute of the <data> element is value, which holds the machine-readable value associated with the content. This attribute is essential for making the <data> element functional, as it provides the data that scripts or applications can access and manipulate. Here is an example of how the <data> tag can be used:

<p>The price of the item is <data value="19.99">$19.99</data>.</p>

Valid Attributes for <data>

Attribute Description
value Specifies the machine-readable value associated with the element's content.

The <data> element supports all global attributes, allowing for additional customization and interaction through CSS and JavaScript. It is a powerful tool for embedding data within HTML documents, enabling developers to create more dynamic and data-driven web applications. By using the <data> element, developers can ensure that both human-readable and machine-readable content are seamlessly integrated.

"I've learned that you shouldn't go through life with a catcher's mitt on both hands; you need to be able to throw something back."

Maya Angelou BrainyQuote