Enlaces e imágenes

La web se llama web porque es una red de páginas conectadas entre sí. Sin enlaces no hay navegación. Sin imágenes no hay experiencia visual. Estas dos etiquetas — <a> y <img> — son de las más usadas de todo HTML.

Enlaces con <a>

La etiqueta <a> (anchor) crea un enlace. Su atributo principal es href (hypertext reference), que indica a dónde lleva:

<!-- Enlace a otra web -->
<a href="https://github.com">Ir a GitHub</a>

<!-- Enlace a otra página de tu sitio -->
<a href="contacto.html">Página de contacto</a>

<!-- Enlace que abre en pestaña nueva -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">Documentación MDN</a>

El atributo target

• target="_self": abre en la misma pestaña (es el valor por defecto).
• target="_blank": abre en una pestaña nueva.

Cuando usas target="_blank", siempre añade rel="noopener". Es una medida de seguridad que evita que la página enlazada pueda manipular tu ventana original. Los navegadores modernos lo hacen automáticamente, pero es buena práctica ponerlo explícitamente.

Tipos de enlaces

<!-- Enlace a email -->
<a href="mailto:[email protected]">Escríbenos un email</a>

<!-- Enlace a teléfono (útil en móviles) -->
<a href="tel:+34912345678">Llámanos: 912 345 678</a>

<!-- Enlace a una sección de la misma página (ancla) -->
<a href="#precios">Ver precios</a>

<!-- La sección de destino necesita un id -->
<h2 id="precios">Nuestros precios</h2>

Los enlaces con #id son enlaces ancla: hacen scroll hasta el elemento que tenga ese id. Son perfectos para tablas de contenido y navegación dentro de una misma página.

Buenas prácticas en enlaces

Imágenes con <img>

La etiqueta <img> inserta una imagen. Es una etiqueta vacía (no tiene cierre):

<img
    src="gato-astronauta.jpg"
    alt="Gato naranja con casco de astronauta flotando entre estrellas"
    width="800"
    height="600"
    loading="lazy"
>

Atributos esenciales

El atributo alt no es opcional. Es lo que ve un usuario con lector de pantalla. Es lo que muestra el navegador si la imagen no carga. Es lo que lee Google para entender la imagen. Describe la imagen como se la explicarías a alguien por teléfono.

width y height: evita el CLS

Si no pones width y height, cuando la imagen carga, el contenido "salta" para hacerle sitio. Eso se llama CLS (Cumulative Layout Shift) y Google lo penaliza en el posicionamiento.

<!-- Bien: el navegador reserva el espacio antes de cargar la imagen -->
<img src="hero.jpg" alt="Vista panorámica de Barcelona" width="1200" height="600">

<!-- Mal: el contenido salta cuando la imagen carga -->
<img src="hero.jpg" alt="Vista panorámica de Barcelona">

Aunque luego redimensiones la imagen con CSS, pon siempre width y height en el HTML. El navegador calcula la proporción (aspect ratio) y reserva el espacio correcto.

Rutas relativas vs absolutas

Entender las rutas es fundamental para que tus enlaces e imágenes funcionen. Hay dos tipos:

Rutas absolutas

La URL completa, empezando por https://. Apuntan a un recurso en otro servidor:

<a href="https://github.com/torvalds">Perfil de Linus Torvalds</a>
<img src="https://picsum.photos/800/400" alt="Imagen aleatoria de Picsum">

Rutas relativas

Relativas a la ubicación del archivo actual. Son las que usas para archivos dentro de tu proyecto:

<!-- Archivo en la misma carpeta -->
<a href="contacto.html">Contacto</a>
<img src="logo.png" alt="Logo">

<!-- Archivo en una subcarpeta -->
<img src="imagenes/equipo/ana.jpg" alt="Ana García, diseñadora UX">

<!-- Archivo una carpeta arriba -->
<a href="../index.html">Volver al inicio</a>

Estructura de ejemplo:

mi-proyecto/
├── index.html
├── contacto.html
├── imagenes/
│   ├── logo.png
│   └── equipo/
│       ├── ana.jpg
│       └── carlos.jpg
└── paginas/
    └── servicios.html

Desde paginas/servicios.html:

• Para ir a index.html: href="../index.html" (subes un nivel)
• Para usar logo.png: src="../imagenes/logo.png" (subes un nivel, entras a imagenes)

Envolver imágenes en enlaces

Un patrón muy común: hacer que una imagen sea clicable. Solo envuelves <img> con <a>:

<a href="proyecto-detalle.html">
    <img
        src="imagenes/proyecto-ecommerce.jpg"
        alt="Captura del proyecto e-commerce: tienda de vinilos con diseño retro"
        width="600"
        height="400"
        loading="lazy"
        decoding="async"
    >
</a>

La etiqueta <figure>

Cuando una imagen necesita una leyenda o pie de foto, usa <figure> con <figcaption>:

<figure>
    <img
        src="grafico-ventas-q1.png"
        alt="Gráfico de barras mostrando ventas del Q1: enero 45k, febrero 52k, marzo 61k"
        width="800"
        height="450"
        loading="lazy"
    >
    <figcaption>Ventas del primer trimestre de 2026. Fuente: departamento comercial.</figcaption>
</figure>

<figure> no es solo para imágenes. También se usa para gráficos, diagramas, fragmentos de código o cualquier contenido que necesite una leyenda.