Enlaces e imágenes

Los enlaces y las imágenes son los dos elementos que distinguen una web de un documento de texto. Los enlaces conectan páginas entre sí — eso es literalmente lo que hace que exista la web. Las imágenes dan contexto visual.

El enlace: <a>

La etiqueta <a> (anchor) crea un hipervínculo. El atributo href define el destino:

<!-- Enlace externo -->
<a href="https://eldata.es">Visitar ELDATA</a>

<!-- Enlace interno (a otra página del mismo sitio) -->
<a href="/about">Sobre mí</a>

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

<!-- Enlace para abrir el cliente de email -->
<a href="mailto:hola@eldata.es">Enviar email</a>

Abrir en pestaña nueva

<a href="https://eldata.es" target="_blank" rel="noopener noreferrer">
  Abrir en pestaña nueva
</a>

rel="noopener noreferrer" es obligatorio cuando usas target="_blank". Sin él, la página de destino puede acceder a tu página a través de window.opener — un agujero de seguridad conocido.

Rutas relativas vs absolutas

<!-- Ruta absoluta: incluye el dominio completo -->
<a href="https://eldata.es/cursos">Cursos</a>

<!-- Ruta relativa: parte desde la página actual -->
<a href="cursos">Cursos</a>       <!-- busca 'cursos' en la misma carpeta -->
<a href="/cursos">Cursos</a>      <!-- busca 'cursos' desde la raíz del sitio -->
<a href="../index.html">Inicio</a> <!-- sube un nivel y busca index.html -->

La imagen: <img>

<img src="/img/foto.jpg" alt="Descripción de la imagen" />

<img> es un elemento vacío — no tiene etiqueta de cierre porque no tiene contenido de texto.

El atributo alt es obligatorio

<!-- ✅ Imagen con alt descriptivo -->
<img src="/logo.png" alt="Logo de ELDATA" />

<!-- ✅ Imagen decorativa: alt vacío para que los lectores de pantalla la ignoren -->
<img src="/decoracion.svg" alt="" />

<!-- ❌ Sin alt: los lectores de pantalla leen el nombre del archivo -->
<img src="/xk2f9a.jpg" />

El alt no es solo accesibilidad — también aparece si la imagen no carga y lo usan los motores de búsqueda para indexar las imágenes.

Tamaño y rendimiento

<!-- Siempre especifica width y height para evitar layout shift -->
<img
  src="/img/articulo.jpg"
  alt="Captura del artículo"
  width="800"
  height="450"
  loading="lazy"
/>

loading="lazy" retrasa la carga de imágenes que no están en el viewport — una optimización gratuita para páginas con muchas imágenes.

Imágenes responsivas con srcset

<!-- El navegador elige la imagen más adecuada según el tamaño de pantalla -->
<img
  src="/img/foto-800.jpg"
  srcset="/img/foto-400.jpg 400w, /img/foto-800.jpg 800w, /img/foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Fotografía de ejemplo"
/>

Imagen como enlace

Puedes combinar <a> y <img> para hacer una imagen clickable:

<a href="/" aria-label="Ir a la página de inicio">
  <img src="/logo.png" alt="Logo de ELDATA" width="120" height="40" />
</a>

La etiqueta <figure> y <figcaption>

Para imágenes con pie de foto lo semántico es envolver todo en <figure>:

<figure>
  <img src="/img/diagram.png" alt="Diagrama del protocolo HTTP" width="700" height="400" />
  <figcaption>Figura 1: Flujo de una petición HTTP básica entre cliente y servidor.</figcaption>
</figure>

En la siguiente lección organizamos contenido en listas y tablas — fundamentales para presentar datos e información estructurada.