Etiqueta HTML <data>

La etiqueta <data> es un elemento HTML que vincula un fragmento de contenido visible con la versión legible por máquina del mismo valor. El texto amigable para el usuario permanece dentro del elemento, mientras que la forma precisa y útil para los scripts se almacena en el atributo value.

Esto es útil cuando tus scripts necesitan datos en un formato específico que no quieres mostrar al usuario. Por ejemplo, imagina una lista de productos. Cada producto tiene un ID interno, pero solo quieres que los compradores vean el nombre del producto. Colocas el ID en el atributo value y el nombre legible entre las etiquetas, de modo que JavaScript puede leer el ID mientras el usuario lee el nombre:

<data value="1545325112">Coca-Cola 500ml</data>

Aquí 1545325112 es el valor legible por máquina (el ID del producto) y Coca-Cola 500ml es lo que ve el usuario.

Cuándo usar <data>

<data> es una de varias maneras de adjuntar datos legibles por máquina al contenido. Elegir la opción correcta es importante:

• Usa <data> cuando hay un fragmento de texto visible que tiene una contraparte natural legible por máquina — un ID de producto, un número de pedido, un SKU, un valor de enumeración, una calificación expresada como número. El elemento es un verdadero elemento HTML, por lo que la relación entre el texto y el valor forma parte de la semántica del documento.
• Usa un atributo personalizado data-* (por ejemplo, data-product-id="1545325112") cuando el valor pertenece a cualquier elemento y simplemente necesitas un lugar donde tus propios scripts puedan leerlo. data-* es más flexible porque puedes colocarlo en cualquier etiqueta y usar cualquier nombre de atributo, pero no tiene un significado estandarizado.
• Usa microdata (itemprop) o JSON-LD cuando el objetivo es exponer datos estructurados a los motores de búsqueda (schema.org). <data> no le dice por sí solo a Google qué significa el valor.

Un patrón habitual es combinar <data> con microdata, usando itemprop para nombrar la propiedad y value para llevar el número preciso:

<data itemprop="productID" value="1545325112">Coca-Cola 500ml</data>

<data> vs <time>

El elemento <time> es un hermano especializado de <data>. El límite semántico es simple:

• Usa <time> solo para fechas, horas, duraciones y zonas horarias (tiene su propio atributo datetime y un formato de análisis definido).
• Usa <data> para cualquier otro tipo de valor legible por máquina — IDs, precios, cantidades, códigos, etcétera.

Así, <time datetime="2026-06-17">June 17</time> es correcto, pero nunca envolverías un ID de producto en <time>.

Lectura del valor con JavaScript

<data> está representado por la interfaz HTMLDataElement, cuya propiedad value refleja el atributo value. Por eso puedes leerlo directamente:

<data id="drink" value="1545325112">Coca-Cola 500ml</data>

<script>
  const el = document.getElementById("drink");

  console.log(el.value);                  // "1545325112"  (HTMLDataElement.value)
  console.log(el.getAttribute("value"));  // "1545325112"  (raw attribute)
  console.log(el.textContent);            // "Coca-Cola 500ml"  (visible text)
</script>

Tanto el.value como el.getAttribute("value") devuelven el string legible por máquina; textContent te da la etiqueta legible por humanos.

Accesibilidad

Las tecnologías de asistencia, como los lectores de pantalla, anuncian el contenido de texto visible, no el atributo value. Un usuario de lector de pantalla escucha "Coca-Cola 500ml", nunca "1545325112".

Por esta razón, el texto visible siempre debe ser significativo por sí solo. Nunca ocultes información que un usuario necesite dentro de value esperando que los lectores de pantalla la muestren. Trata value estrictamente como datos para scripts, y mantén todo el significado orientado al usuario en el texto del elemento.

Compatibilidad con navegadores y SEO

Todos los navegadores modernos analizan <data>, pero no hay ningún renderizado visual o de comportamiento especial — se muestra exactamente como un <span>. Su propósito es puramente semántico.

Por la misma razón, <data> no es un sustituto de los datos estructurados. Los motores de búsqueda no interpretan un atributo value simple como datos de schema.org. Si necesitas resultados enriquecidos, usa microdata adecuada (itemprop) o, más comúnmente hoy en día, JSON-LD.

Sintaxis

La etiqueta <data> va en pares. El contenido se escribe entre las etiquetas de apertura (<data>) y cierre (</data>).

Ejemplo de la etiqueta HTML <data>:

Etiqueta HTML <data>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Refrigerated drinks</p>
    <ul>
      <li>
        <data value="1545325112">Coca-Cola 500ml</data>
      </li>
      <li>
        <data value="1545325113">Coca-Cola 330ml</data>
      </li>
      <li>
        <data value="1545325114">Coca-Cola Light 330ml</data>
      </li>
    </ul>
  </body>
</html>

Atributos

La etiqueta <data> también admite los Atributos Globales y los Atributos de Evento.

Práctica