Ejercicio práctico 10: Enlaces con Imágenes en HTML
Aprende a crear enlaces con imágenes en HTML de forma sencilla. Este ejercicio práctico te enseña cómo utilizar etiquetas <a> y <img> combinadas para mejorar la navegación visual de tus páginas web.
Actividad
Crea un documento HTML donde una imagen sirva como enlace.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces con Imágenes</title>
</head>
<body>
<h1>Enlace con Imagen</h1>
<a href="https://div.zone/" target="_blank">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Descripción de la imagen"
width="360"
height="200"
/>
</a>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Imagen con enlace seguro
Cuando la imagen es un enlace, las mismas reglas de seguridad de los enlaces aplican. Agregá rel y un title para el tooltip.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlace Seguro con Imagen</title>
</head>
<body>
<h1>Nuestros Sponsors</h1>
<a
href="https://div.zone/"
target="_blank"
rel="noopener noreferrer"
title="Visitar DivZone - Generador de páginas web con IA"
>
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Logo de DivZone, generador de páginas web con inteligencia artificial"
width="360"
height="200"
/>
</a>
</body>
</html>
rel="noopener noreferrer": protege contra tabnabbing (refuerzo del ejercicio 3).title: muestra un tooltip cuando el usuario pasa el mouse sobre la imagen.alt: describe la imagen y el destino del enlace para lectores de pantalla.
Variante 2: Galería de imágenes clickeable
Creá una galería donde cada imagen enlace a un sitio diferente, con tamaño uniforme.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Galería de Proyectos</title>
</head>
<body>
<h1>Mis Proyectos</h1>
<figure>
<a href="https://div.zone/" target="_blank" rel="noopener noreferrer">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Proyecto 1: Sitio web de DivZone"
width="300"
height="167"
/>
</a>
<figcaption>Proyecto 1: DivZone</figcaption>
</figure>
<figure>
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Proyecto 2: Perfil de GitHub"
width="300"
height="167"
/>
</a>
<figcaption>Proyecto 2: GitHub</figcaption>
</figure>
<figure>
<a href="https://developer.mozilla.org/es/" target="_blank" rel="noopener noreferrer">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Proyecto 3: Documentación en MDN"
width="300"
height="167"
/>
</a>
<figcaption>Proyecto 3: MDN Web Docs</figcaption>
</figure>
</body>
</html>
Variante 3: Enlaces de imagen con target="_blank" vs target="_self"
El comportamiento del enlace en imagen es idéntico al de un enlace de texto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Comportamiento de Enlaces</title>
</head>
<body>
<h1>Comparación de target en imágenes</h1>
<p>Abre en pestaña nueva:</p>
<a href="https://div.zone/" target="_blank" rel="noopener noreferrer">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Enlace que abre en pestaña nueva"
width="200"
height="111"
/>
</a>
<p>Abre en la misma pestaña (comportamiento por defecto):</p>
<a href="https://div.zone/" target="_self">
<img
src="https://docs.div.zone/img/divzone-social-card.jpg"
alt="Enlace que abre en la misma pestaña"
width="200"
height="111"
/>
</a>
</body>
</html>
No uses target="_blank" sin rel="noopener noreferrer". La seguridad de tus usuarios es tan importante como el diseño visual.
Mini-desafío: Ponelo a prueba
Creá una galería de proyectos que contenga:
- Un
<h1>con el título "Mis Proyectos Web" - Al menos 3 imágenes-enlace, cada una apuntando a un sitio diferente
- Todas las imágenes con
altdescriptivo,widthyheight - Cada enlace con
target="_blank"yrel="noopener noreferrer" - Un
titleen cada<a>que describa el destino - Agrupá cada imagen-enlace con
<figure>y agregá<figcaption>
Intentá armarlo sin mirar los ejemplos anteriores. Si te trabás, volvé a la variante que necesites.
Errores comunes con enlaces e imágenes
| Error | Por qué es un problema |
|---|---|
alt vacío en imágenes que son enlaces | El usuario no sabe a dónde lleva el enlace. El alt debe describir el destino, no solo la imagen |
No cerrar <a> correctamente | Si el </a> queda mal anidado, partes de la página se vuelven clickeables sin querer |
Link roto en el href | Si la URL no existe o está mal escrita, el enlace no lleva a ningún lado. Verificá siempre las URLs |
Olvidar rel="noopener noreferrer" | Vulnerabilidad de seguridad: la página destino puede manipular tu sitio |
| Usar imágenes enormes para enlaces pequeños | El usuario descarga megas innecesarios. Redimensioná las imágenes al tamaño real de visualización |
Preguntas frecuentes
¿Una imagen-enlace necesita un alt diferente al de una imagen normal?
Sí. El alt de una imagen-enlace debe describir la acción o el destino del enlace, no solo la imagen. Por ejemplo, en lugar de alt="Logo de DivZone", usá alt="Visitar el sitio web de DivZone". Esto ayuda a los usuarios de lectores de pantalla a entender que la imagen es clickeable y hacia dónde lleva.
¿Puedo enlazar una imagen a WhatsApp?
Sí, usando el protocolo https://wa.me/ en el href. Ejemplo:
<a href="https://wa.me/541112345678" target="_blank" rel="noopener noreferrer">
<img src="whatsapp-icon.png" alt="Contactanos por WhatsApp" width="64" height="64" />
</a>
Esto abre una conversación de WhatsApp con el número especificado. Es una técnica muy usada en landing pages y sitios comerciales.
¿Enlaces con imágenes dominados? Creá un portafolio visual con DivZone AI donde cada imagen sea un enlace a una sección distinta. Vas a ver cómo el generador combina etiquetas <a> e <img> en un proyecto real. ¡Aprendé haciendo!