En este ejercicio de HTML de ficha de producto construirás una tarjeta con contenido suficiente para decidir si merece la pena visitar la página del producto.
Enunciado
Crea una ficha de mochila con título, imagen, precio, dos características y un enlace descriptivo. Usa un nivel de encabezado adecuado al contexto y evita una acción de compra ficticia.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<article aria-labelledby="producto-mochila">
<h2 id="producto-mochila">Mochila urbana de 18 litros</h2>
<img src="mochila.webp" width="800" height="600"
alt="Mochila azul con bolsillo frontal y dos correas">
<p><strong>39,90 €</strong></p>
<ul>
<li>Compartimento acolchado para portátil de 13 pulgadas</li>
<li>Bolsillo lateral para botella</li>
</ul>
<a href="mochila-urbana.html">Ver la mochila urbana</a>
</article>Utiliza una imagen propia y actualiza sus dimensiones. El texto alternativo describe lo relevante de esa foto. El enlace comunica su destino incluso leído fuera de la tarjeta. Sustituye la ruta de ejemplo por un destino que exista.
Cómo comprobar tu solución
- Comprueba que el título queda al nivel correcto dentro del listado.
- Desactiva las imágenes y verifica que la ficha se entiende.
- Recorre el enlace con el teclado y confirma que abre el destino previsto.
Reto adicional
Crea una segunda ficha y cambia el ID del encabezado. Comprueba que ambas tarjetas mantienen una estructura coherente y que sus enlaces se distinguen.
Repasa los conceptos en el tutorial de MasterCodePro.
