Hoy toca ver una etiqueta bastante chunga. Bueno, un poquito difícil. Estoy hablando de la etiqueta Data.
Ojo, no me malinterpretes, esta etiqueta es bastante fácil de aplicar, pero se suele utilizar con otros lenguajes, como por ejemplo JavaScript, y entonces ya se complica un poquito más la cosa.
No te asustes porque a continuación te voy a enseñar todo lo que necesitas saber para utilizar esta etiqueta de HTML.
Por cierto, recuerda que este episodio forma parte del diccionario HTML, donde vemos cada una de las as de este lenguaje.
Y ahora sí, vamos a ver la etiqueta Data.
¿Qué es la etiqueta Data en HTML?
Muy bien, ¿qué es la etiqueta Data y para que sirve? La etiqueta Data en HTML se utiliza para asociar un valor a un elemento que no es visible para el usuario, es decir, no se ve directamente en el navegador pero está ahí.
El principal propósito de esta etiqueta es proporcionar una manera estándar de incrustar datos controlados.
Además, se suele usar el atributo value dentro de esta etiqueta para almacenar el valor que, por cierto, no se muestra.
Mientras que el contenido dentro de la etiqueta es lo que se mostrará en la página web.
Ejemplo de etiqueta Data en HTML
Para entenderlo un poquito mejor, vamos a ver un ejemplo.
Fijaros porque esta vez toca un ejemplo un poquito más difícil de lo normal, pero bueno, nada que no podamos hacer.
Aquí dentro del body lo que tenemos es una pequeña lista con dos productos y dentro de cada producto tenemos la imagen, el título, la descripción y ojo, porque tenemos un span con dos atributos y cada uno tiene una función de JavaScript.
<body>
<ul class="product-list">
<li class="product">
<img src="img/producto-1.webp" alt="Producto 1">
<h2>Producto 1</h2>
<p>Descripción del producto 1</p>
<span class="price" onmouseover="showOriginalPrice(this)" onmouseout="hideOriginalPrice()">$2000 (Desc aplicado)</span>
<data value="3000"></data> <!-- Precio original -->
</li>
<li class="product">
<img src="img/producto-2.webp" alt="Producto 2">
<h2>Producto 2</h2>
<p>Descripción del producto 2</p>
<span class="price" onmouseover="showOriginalPrice(this)" onmouseout="hideOriginalPrice()">$1000 (Desc aplicado)</span>
<data value="2000"></data> <!-- Precio original -->
</li>
<!-- ... otros productos ... -->
</ul>
</body>Vamos a utilizar esto para hacer un cálculo del precio y que nos muestre el precio original en base al valor que tenemos aquí en la etiqueta Data.
Aquí vamos con el código JavaScript para hacer el ejemplo.
function showOriginalPrice(element) {
// Accede al elemento <data> cercano
let originalPriceElement = element.parentElement.querySelector('data');
let originalPrice = originalPriceElement.getAttribute('value');
// Cambia el contenido del <span>
element.textContent = "$" + originalPrice + " (Precio original)";
}
function hideOriginalPrice(element) {
// Cambia de nuevo al precio con descuento (esto puede variar según tu lógica de negocio)
element.textContent = "$2000 (Desc aplicado)";
}Esto puede parecer un poquito abstracto, pero bueno, ahora lo veremos.
Ejemplo en el navegador.
El uso de la etiqueta Data parece un poquito complicado pero realmente puede ser muy útil, especialmente con otros lenguajes como hemos visto.
Esta etiqueta Data me recuerda un poquito a la etiqueta Canvas que ya vimos en otro vídeo, bueno, salvando las diferencias, pero el caso es que también se utiliza con otros lenguajes.
Espero que te haya resultado útil esta lección y recuerda que si tienes cualquier duda o tienes cualquier sugerencia, puedes dejarla en los comentarios.
Nos vemos en el próximo vídeo. Adiós.