Hipervínculos e imágenes

Conecta páginas con enlaces y agrega imágenes con texto alternativo accesible.

📖

Teoría

Los enlaces y las imágenes son dos de los elementos más importantes de la web.

Hipervínculos con <a>:

href → URL de destino

target="_blank" → abre en nueva pestaña

rel="noopener" → seguridad al abrir en nueva pestaña

Imágenes con <img>:

src → ruta de la imagen

alt → texto alternativo (obligatorio para accesibilidad)

width y height → dimensiones

html

<!-- Enlace básico -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>

<!-- Enlace en nueva pestaña (seguro) -->
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

<!-- Enlace a sección en la misma página -->
<a href="#contacto">Ir a contacto</a>

<!-- Imagen con texto alternativo -->
<img src="foto.jpg" alt="Foto de perfil de Ana García" width="200" height="200">

<!-- Imagen como enlace -->
<a href="index.html">
  <img src="logo.png" alt="DevPath - Inicio">
</a>

⚠️Alt text siempre

Nunca omitas el atributo alt en las imágenes. Si la imagen es decorativa (no aporta información), usa alt="". Si tiene contenido, describe la imagen de forma concisa y útil para usuarios con lectores de pantalla.

⚡

Ejercicio práctico

🎯 Tu misión

Crea una galería simple con 4 imágenes (puedes usar URLs de Unsplash o placeholder.com), cada una con su alt text descriptivo y un enlace que lleve a la fuente de la imagen.

Vista previa

←Capítulo anterior

Siguiente capítulo→