HTML ofrece el elemento <data> que permite proveer información que está diseñada específicamente para interactuar con programas. Este elemento permite aportar información de cualquier tipo; pero si se quiere aportar información de fecha u hora, se recomienda usar el elemento <time>.
El elemento <data> puede ser de gran utilidad en situaciones en las que se necesita facilitar la interacción entre un programa y el contenido del documento, es decir, que permite vincular parte del contenido con información para programas. Esta información se inserta a través del atributo value.
Para utilizar correctamente este elemento, debe usarse dos etiquetas: <data>, para indicar la apertura del elemento, y </data>, para indicar el cierre. Su contenido debe ser textual y/o cualquier elemento que sea de contenido de frase.
En el ejemplo siguiente se muestra un listado de productos, y se asocia cada producto con un número. Los navegadores web no muestran, por defecto, el valor del atributo value, pero podemos mostrar su valor con ayuda de estilos CSS, cuyo código también se muestra a continuación.
<ul>
<li><data value="401">Producto 1</data></li>
<li><data value="402">Producto 2</data></li>
<li><data value="403">Producto 3</data></li>
</ul>
<style>
data:hover::after {
content: ' (ID ' attr(value) ')';
}
</style>
Tal y como se puede apreciar, al pasar el puntero del ratón encima de los elementos de la lista aparecerá a continuación el número de cada producto.
- Producto 1
- Producto 2
- Producto 3
