acerca de HTML

Referencia de etiquetas

Etiqueta data en HTML: texto y valores para máquinas

La etiqueta <data> en HTML asocia un texto legible con un valor legible por máquinas mediante el atributo value. Sirve, por ejemplo, para mostrar el nombre de un producto mientras un programa utiliza su código estable: puedes cambiar el nombre comercial sin cambiar la identidad con la que lo reconoce tu aplicación.

<p>Producto: <data value="CURSO-HTML-01">Curso de HTML básico</data>.</p>

El usuario ve «Producto: Curso de HTML básico.». El código CURSO-HTML-01 permanece en el atributo y no aparece automáticamente en la página. Un script puede leerlo con document.querySelector("data").value; el nombre visible se obtiene mediante textContent.

Sintaxis y contexto válido

Escribe una apertura <data value="…"> y un cierre </data>: ninguna de las dos etiquetas se puede omitir. value es obligatorio y debe representar el contenido en un formato adecuado para quien lo procese. HTML no establece un formato único para todos los códigos de producto.

<data> pertenece al contenido de frase. Puedes colocarlo dentro de un párrafo o una entrada de lista que admita ese contenido. También puede contener elementos de frase, como <em>, además de texto; no debe envolver un <div>, varios párrafos ni una lista completa. El HTML Living Standard define su significado y modelo de contenido.

Qué aporta value

value es el atributo específico de <data>. Un SKU como CURSO-HTML-01 identifica el producto; un código numérico como 00127 también puede hacerlo. En JavaScript, la propiedad DOM .value devuelve una cadena y refleja el atributo, por lo que conserva los ceros iniciales. No convierte el código en un número ni verifica que exista en un inventario.

El elemento admite atributos globales: id permite localizar un producto con document.getElementById(...); class permite seleccionarlo y darle estilos; lang declara el idioma del texto. Estos atributos no sustituyen value. Una propiedad CSS como color cambia la presentación, mientras que .value y .textContent son propiedades DOM utilizadas desde JavaScript.

Cambiar solo value conserva el nombre mostrado y modifica el código que lee el programa. Cambiar solo el texto conserva el código. Esa independencia permite renombrar un producto, pero exige mantener ambos datos coherentes.

Ejemplo práctico: seleccionar entre tres productos

Guarda este documento completo como productos.html en UTF-8 y ábrelo en un navegador. No requiere servidor, archivos adicionales ni CSS. Los nombres se muestran siempre; JavaScript añade botones para consultar el código de una selección local.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Productos y sus códigos</title>
  </head>
  <body>
    <h1>Materiales para aprender HTML</h1>
    <ul id="data-productos">
      <li>
        <data value="CURSO-HTML-01">Curso de HTML básico</data>
        <button type="button" hidden>Elegir curso</button>
      </li>
      <li>
        <data value="GUIA-HTML-02">Guía de etiquetas HTML</data>
        <button type="button" hidden>Elegir guía</button>
      </li>
      <li>
        <data value="FICHAS-HTML-03">Fichas de práctica HTML</data>
        <button type="button" hidden>Elegir fichas</button>
      </li>
    </ul>
    <p id="data-seleccion" aria-live="polite">
      La selección local requiere JavaScript; puedes consultar la lista.
    </p>

    <script>
      const lista = document.getElementById("data-productos");
      const mensaje = document.getElementById("data-seleccion");

      lista.querySelectorAll("li").forEach((fila) => {
        const producto = fila.querySelector("data");
        const boton = fila.querySelector("button");

        boton.addEventListener("click", () => {
          mensaje.textContent =
            `Seleccionaste ${producto.textContent}: ${producto.value}.`;
        });
        boton.hidden = false;
      });

      mensaje.textContent = "Elige un producto para consultar su código.";
    </script>
  </body>
</html>
  1. Al abrir el archivo con JavaScript, aparecen tres nombres y tres botones. El script busca cada <data> dentro de su fila y registra la acción antes de mostrar el botón.
  2. Activa «Elegir guía»: el mensaje cambia a «Seleccionaste Guía de etiquetas HTML: GUIA-HTML-02.». La propiedad .value aporta el código; textContent aporta el nombre.
  3. Recorre los botones con Tab y actívalos con Enter o Espacio. El foco permanece en el botón. aria-live="polite" permite comunicar la actualización sin mover el foco.
  4. Desactiva JavaScript y recarga: la lista sigue mostrando los tres productos y la explicación. Los botones permanecen ocultos porque no podrían realizar su acción.

Cambia el nombre de la guía y vuelve a seleccionarla: aparece el nombre nuevo con el mismo código. Cambia después value y comprueba el código nuevo. Si retiras <data> conservando su texto, el nombre sigue visible, pero este script deja de encontrar el elemento y falla al consultar sus propiedades. Para usar otro marcado también debes adaptar el código que lo lee.

Esta selección solo cambia un mensaje en la página: no realiza compras, no envía datos y no persiste al recargar. La lista tampoco es una base de datos: el código debe corresponder con los registros que gestione tu aplicación.

Diferencias entre data, data-*, time y span

¿Data y data- son iguales?* No. <data> expresa la correspondencia entre su contenido y value. Los atributos personalizados data-* guardan información propia de la página en cualquier elemento HTML, como un estado de interfaz. Por ejemplo, en <span data-sku="GUIA-HTML-02">Guía de etiquetas HTML</span>, el script leería .dataset.sku, no .value. El estándar define data-* y su acceso mediante dataset.

Para una fecha u hora, elige el elemento específico <time> con datetime, por ejemplo <time datetime="2026-10-03">3 de octubre de 2026</time>. Para agrupar texto y aplicarle CSS sin asociar una representación para máquinas, basta un <span>. <script> ejecuta el código del ejemplo; <data> no ejecuta nada por sí mismo.

Accesibilidad, errores y límites

El nombre visible debe ser comprensible sin consultar value. <data> no es un control interactivo y no necesita hacerse enfocable. Su semántica ARIA implícita es genérica; no añadas un rol redundante ni supongas que un lector de pantalla anunciará el código del atributo. Si el comprador necesita conocer ese código, escríbelo también como texto visible.

¿Value aparece en la página? No por defecto. En el ejemplo práctico aparece únicamente porque el script lo copia al mensaje. Tampoco es información secreta: se puede inspeccionar en el HTML.

Si la lectura del código no funciona, comprueba estas causas:

  • Falta value: el marcado no cumple el requisito del elemento; añade el código correspondiente.
  • Se utiliza producto.dataset.value: eso consulta data-value, no el atributo value. Utiliza producto.value.
  • El selector no encuentra el producto o el script se ejecuta antes de crearse la lista. En el documento completo, el script está después del contenido.
  • Se esperaba un precio, una operación numérica o un formulario automático. <data> no realiza cálculos ni envía su valor por sí solo.

<data> tampoco crea por sí solo metadatos comerciales reconocidos por buscadores ni resultados enriquecidos. JSON-LD es otro formato para expresar datos estructurados con un vocabulario definido; necesita su propio marcado y requisitos. La documentación de Google sobre datos estructurados explica esa integración.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica tanto el elemento <data> como la propiedad .value como ampliamente disponibles. El soporte del elemento y la ejecución de un script son comprobaciones distintas: el texto de ambos ejemplos se mantiene legible con JavaScript desactivado.

El Living Standard establece las reglas del marcado; MDN complementa la consulta del DOM y del soporte. Para una aplicación que use códigos de productos, verifica además que sus valores coincidan con el sistema que los consume.