Etiqueta data en HTML

¿Qué es la etiqueta <data> en HTML?

La etiqueta HTML <data> se utiliza para incrustar información de valor en una página web. La información incrustada en la etiqueta <data> se puede utilizar para mostrar valores de datos, estadísticas o cualquier otro tipo de información que se desee mostrar en la página.

Además, la etiqueta <data> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para mostrar la información incrustada. El contenido de la etiqueta <data> se puede mostrar utilizando CSS para controlar el estilo y la presentación de la información.

Ejemplo de uso

Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <data> en HTML5:


<p>La temperatura actual es de <data value="25" type="number">25 grados</data> Celsius.</p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <data> para incrustar el valor “25” como la temperatura actual en grados Celsius. Hemos utilizado el atributo “value” con el valor “25” y el atributo “type” con el valor “number” para indicar que se trata de un valor numérico.

Atributos

La etiqueta HTML <data> tiene dos atributos obligatorios:

  • “value”: este atributo especifica el valor de la información incrustada en la etiqueta <data>. El valor puede ser de cualquier tipo de dato, incluyendo números, cadenas de texto y otros tipos de datos.
  • “type”: este atributo especifica el tipo de información que se está incrustando en la etiqueta <data>. Los valores posibles son “string”, “number”, “date”, “time”, “datetime”, “month”, “week”, “range” y “color”. Cada uno de estos valores corresponde a un tipo de dato específico.

Además de estos atributos obligatorios, la etiqueta <data> también admite los siguientes atributos opcionales:

  • “id”: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
  • “class”: este atributo se utiliza para aplicar estilos CSS específicos a la etiqueta <data>. El valor del atributo “class” se puede utilizar para aplicar un estilo específico a la etiqueta o para agrupar varias etiquetas con el mismo estilo.

Ejemplo:

Aquí te presento un ejemplo de cómo se pueden utilizar los atributos “value” y “type” en la etiqueta <data>:


<p>La fecha actual es: <data value="2022-03-10" type="date"></data></p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <data> para incrustar la fecha actual utilizando el tipo de dato “date”. Hemos utilizado el atributo “value” con el valor “2022-03-10” y el atributo “type” con el valor “date” para indicar que se trata de una fecha.

Más ejemplos

Aquí te presento dos ejemplos completos y avanzados de la etiqueta <data> de HTML5:

Ejemplo 1: Utilizando la etiqueta <data> para mostrar estadísticas y aplicando estilos personalizados con CSS.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta data</title>
	<style>
		.stats {
			font-weight: bold;
			color: #008000;
		}
	</style>
</head>
<body>
	<p>El sitio web ha tenido <data value="15234" type="number" class="stats"></data> visitas esta semana.</p>
	<p>El número de registros nuevos en el sitio es: <data value="253" type="number" class="stats"></data></p>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <data> para mostrar estadísticas de visitas y registros en un sitio web. Hemos utilizado el atributo “value” para especificar los valores numéricos de las estadísticas y el atributo “type” con el valor “number” para indicar que se trata de un valor numérico.

También hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a las estadísticas. En la regla CSS definida, hemos aplicado un estilo de fuente en negrita y un color verde oscuro a las estadísticas.

Ejemplo 2: Utilizando la etiqueta <data> y la etiqueta <time> para mostrar una fecha y hora en una página web.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta data y time</title>
</head>
<body>
	<p>La última actualización de esta página fue el: <data value="2022-03-10T16:30:00" type="datetime"><time datetime="2022-03-10T16:30:00">10 de marzo de 2022 a las 4:30 PM</time></data></p>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <data> y la etiqueta <time> para mostrar una fecha y hora de la última actualización de la página web. Hemos utilizado el atributo “value” para especificar la fecha y hora en formato ISO 8601 y el atributo “type” con el valor “datetime” para indicar que se trata de una fecha y hora.

También hemos utilizado la etiqueta <time> para mostrar la fecha y hora en un formato más legible para el usuario.