HTML <data> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <data> HTML element is used to associate a machine-readable value with content that is readable by humans. This allows you to provide information in a way that both users and programs (such as search engines, scripts, or assistive technologies) can understand. Essentially, it acts as a bridge between human-friendly text and data that can be programmatically interpreted.

For example, if you display a measurement, price, or date on a webpage, you can use the <data> element to include the actual numeric or structured value while showing a more readable form to users. The element ensures that the information is semantically correct and helps improve accessibility and data parsing.

The <data> element is typically used inline with text, and it can contain any flow content, such as text or other inline elements. It is particularly useful for embedding structured data directly within HTML content without altering the visual presentation.

A key benefit of using <data> is that it separates the human-readable content from the underlying value, making it easier for scripts, automated tools, or APIs to extract and utilize the information accurately.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: low content, phrasing content, palpable content.
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<p>New Products</p>

<ul>

  <li><data value="398">Mini Ketchup</data></li>

  <li><data value="399">Jumbo Ketchup</data></li>

  <li><data value="400">Mega Jumbo Ketchup</data></li>

</ul>

Result

Editor

Attributes

value: This attribute specifies the machine-readable translation of the content of the element.

Global Attributes

The <data> tag also supports the Global Attributes in HTML5

Event Attributes

None

Browser Support

The following information will show you the current browser support for the HTML <data> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.