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.