data: The Data element

The <data> HTML element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used instead.

Attributes

Specific attributes

Required attributes

value="[machine-readable value]" specifies the machine-readable translation of the content of the element.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<p>Community members contributed to the project:</p>
<ul>
  <li><data value="42">Forty-two</data> commits this week</li>
  <li><data value="13">Thirteen</data> new contributors</li>
  <li><data value="7">Seven</data> open source libraries integrated</li>
</ul>

<p>The IndieWeb community has grown to <data value="2024">two thousand and twenty-four</data> active websites.</p>