Understanding and Using the HTML `<data>` Element: Embedding Machine-Readable Data

Learn how to use the HTML `<data>` element to embed machine-readable data alongside human-readable content. This tutorial explains its functionality, the importance of the `value` attribute, and demonstrates its application in providing structured data for improved web page processing and accessibility.

Understanding the HTML <data> Element

What is the <data> Element?

The HTML <data> element allows you to embed machine-readable data alongside human-readable content. This is particularly useful for associating data with elements for easier processing by scripts or applications that need structured data. The human-readable content is displayed in the browser, while the machine-readable part is accessible via the value attribute.

For time or date information, the <time> element is preferred.

Example:

<p>Product: <data value="123">Cherry Tomato</data></p>

Here, "Cherry Tomato" is displayed, but the value attribute ("123") provides a machine-readable product code.

Browser Support

Support for the <data> element varies across browsers. This table shows the first browser version with full support:

The `value` Attribute

The value attribute is crucial; it holds the machine-readable data. It's best practice to use a structured format (like JSON) for complex data.

Attributes

The <data> element also supports standard global attributes.