HTML data

La etiqueta <data> en HTML es utilizada para marcar un contenido específico como un dato, con el objetivo de que los programas automatizados puedan procesarlo de manera más eficiente. Esta etiqueta se utiliza en conjunto con el atributo “value” para especificar el valor del dato.

La etiqueta <data> es una etiqueta de contenido semántico, lo que significa que proporciona información adicional sobre el significado del contenido dentro de ella.

Esto puede ser útil para mejorar el acceso a la información por parte de personas con discapacidades o para facilitar el procesamiento automatizado del contenido.

Ejemplo:

<data value="1000">Mil</data>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el contenido visible es “Mil” pero el valor del dato es “1000”.

Además de “value”, existen otros atributos como “itemprop” que se utiliza para vincular el elemento con una propiedad de una entidad en una página web.

En general, la etiqueta <data> es una herramienta útil para proporcionar contexto adicional sobre el contenido de una página web y mejorar la accesibilidad y procesamiento automatizado de la información.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <data> en HTML podría ser para marcar el precio de un producto en una página de comercio electrónico.

En lugar de simplemente mostrar el precio como texto plano, se puede utilizar la etiqueta <data> para indicar que se trata de un precio y proporcionar información adicional como la moneda utilizada.

<p>Precio: <data value="19.99" itemprop="price" itemscope itemtype="http://schema.org/Price">$19.99</data></p>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el texto visible es “$19.99”, pero el valor del precio real es “19.99”. El atributo “itemprop” se utiliza para indicar que el elemento está relacionado con una propiedad de tipo “Precio”, y los atributos “itemscope” y “itemtype” se utilizan para indicar que el elemento es una entidad de tipo “Precio” en un esquema específico.

Otro ejemplo sería para marcar la fecha de un evento en un calendario:

<p>El evento se realizará el <data value="2022-12-25">25 de diciembre de 2022</data></p>
Lenguaje del código: HTML, XML (xml)

En este caso el valor de la etiqueta data es una fecha en formato ISO-8601, eso hace que sea fácil de procesar para programas automatizados.

En ambos ejemplos, la etiqueta <data> proporciona información adicional sobre el contenido que facilita su procesamiento automatizado y mejora la accesibilidad de la información.

Propiedades

La etiqueta <data> en HTML tiene varios atributos que pueden ser utilizados para proporcionar información adicional sobre el contenido dentro de la etiqueta. Los atributos más importantes son:

  • value: Este atributo especifica el valor del dato. Es el atributo principal y es obligatorio.
  • itemprop: Este atributo se utiliza para vincular el elemento con una propiedad de una entidad en una página web. Es utilizado para dar significado semántico al contenido dentro de la etiqueta.
  • itemscope: Este atributo se utiliza en conjunto con “itemtype” para indicar que el elemento es una entidad de un tipo específico. Es utilizado para dar significado semántico al contenido dentro de la etiqueta.
  • itemtype: Este atributo se utiliza en conjunto con “itemscope” para indicar el tipo de entidad al que pertenece el elemento. Es utilizado para dar significado semántico al contenido dentro de la etiqueta.

Estos atributos son los más importantes para el uso de etiqueta data, ya que proporcionan información adicional sobre el contenido que facilita su procesamiento automatizado y mejora la accesibilidad de la información.

Sin embargo, dependiendo del contexto de uso, pueden ser necesarios utilizar otros atributos para mejorar la experiencia del usuario o el procesamiento automatizado.

Ejemplos de atributos

Algunos ejemplos adicionales de uso de los atributos de la etiqueta <data> en HTML:

  • value: En este ejemplo, el contenido visible es “Cien” pero el valor del dato es “100”.
<data value="100">Cien</data>
Lenguaje del código: HTML, XML (xml)
  • itemprop: En este ejemplo, se utiliza el atributo “itemprop” para vincular la duración del curso con una entidad de tipo “Curso” y el valor de “duration” es “120” minutos.
<div itemscope> <p>Duración del curso: <data itemprop="duration" value="120">2 horas</data></p> </div>
Lenguaje del código: HTML, XML (xml)
  • itemscope: En este ejemplo, se utiliza el atributo “itemscope” para indicar que el elemento es una entidad de tipo “Lugar”
<div itemscope> <p>Nombre del lugar: <data itemprop="name">Parque Central</data></p> <p>Latitud: <data itemprop="latitude" value="40.730610" itemscope itemtype="http://schema.org/Place">40.730610</data></p> </div>
Lenguaje del código: HTML, XML (xml)
  • itemtype: En este ejemplo, se utiliza el atributo «itemtype» para indicar que el elemento es una entidad de tipo “Lugar” del esquema “http://schema.org/Place”.
<div itemscope> <p>Nombre del lugar: <data itemprop="name">Parque Central</data></p> <p>Latitud: <data itemprop="latitude" value="40.730610" itemscope itemtype="http://schema.org/Place">40.730610</data></p> </div>
Lenguaje del código: HTML, XML (xml)

En general, estos atributos son utilizados para dar significado semántico al contenido dentro de la etiqueta <data> y facilitar su procesamiento automatizado y accesibilidad.