Etiqueta `<data>` de HTML

La etiqueta <data> es un elemento de HTML5.1. Esta etiqueta se utiliza para definir un análogo legible por máquina para los datos especificados (una versión estandarizada, comprensible para sistemas automatizados o scripts en el sitio web).

Esto puede ser útil en casos en los que los datos deban estar en un formato particular necesario para ejecutar scripts, pero no desea que sus usuarios vean este formato. Por ejemplo, desea mostrar una lista de productos para que sus usuarios elijan. Cada producto tiene su ID, pero no desea mostrar esta información a los usuarios. Luego, coloca los IDs de los productos en la etiqueta <data>, y la máquina procesará esta información y mostrará a los usuarios el producto con el ID correspondiente.

La etiqueta <data> utiliza el atributo value para almacenar una versión legible por máquina de su contenido. Esto permite que los scripts procesen el valor subyacente mientras se muestra un texto diferente a los usuarios.

El contenido visible dentro de la etiqueta <data> debe ser descriptivo, ya que la tecnología asistiva podría no leer el atributo value. Además, el atributo value podría no ser indexado por los rastreadores de búsqueda.

Recomendamos utilizar la <time> etiqueta si el valor está relacionado con fechas u horas.

Sintaxis

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

Ejemplo de la etiqueta HTML `<data>`:

Etiqueta HTML <data>

html

<!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>

Try it Yourself »

Resultado

ejemplo de data

Atributos

Atributo	Valor	Descripción
value	formato legible por máquina	Establece la versión legible por máquina del contenido de la etiqueta `<data>`.

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

Práctica

¿Cuál es el uso de la etiqueta <data> en HTML y qué representa?

La etiqueta <data> se utiliza para enlazar con datos externos.La etiqueta <data> representa el resultado de un cálculo en un script.La etiqueta <data> se utiliza para traducir un texto a otro idioma.La etiqueta <data> se utiliza para especificar una versión más fácil de leer de ciertos tipos de datos.La etiqueta <data> representa contenido legible por máquina.

Etiqueta <data> de HTML ​

Sintaxis ​

Ejemplo de la etiqueta HTML <data>: ​

Resultado ​