Enlaces

Los enlaces son lo que convierte un conjunto de documentos en una web. En esta lección aprenderás a enlazar páginas de tu sitio y de otros sitios, a saltar a secciones, a abrir el correo o el teléfono del usuario y a ofrecer descargas, todo de forma segura y accesible.

Concepto

Un enlace se crea con el elemento <a> (de anchor, ancla) y su atributo href (hypertext reference), que indica el destino:

<a href="destino">Texto que el usuario ve y en el que da clic</a>

Piensa en href como la dirección en un sobre: puede ser una dirección completa con país y ciudad (ruta absoluta) o algo como "el cuarto de al lado" (ruta relativa).

Rutas absolutas y relativas

Absolutas

Incluyen el protocolo y el dominio completo. Se usan para enlazar otros sitios:

<a href="https://developer.mozilla.org/es/">MDN en español</a>

Relativas

Parten de la ubicación del archivo actual. Se usan para enlazar páginas de tu propio sitio. Con esta estructura:

sitio/
├── index.html
├── contacto.html
├── servicios/
│   ├── index.html
│   └── diseno-web.html
└── img/
    └── logo.svg

<!-- Desde index.html -->
<a href="contacto.html">Contacto</a>                 <!-- misma carpeta -->
<a href="servicios/diseno-web.html">Diseño web</a>  <!-- entrar a una carpeta -->
<a href="servicios/">Servicios</a>                   <!-- abre servicios/index.html -->

<!-- Desde servicios/diseno-web.html -->
<a href="../contacto.html">Contacto</a>             <!-- ../ sube un nivel -->
<a href="index.html">Todos los servicios</a>

<!-- Relativa a la raíz del dominio (empieza con /) -->
<a href="/contacto.html">Contacto</a>

Ruta	Significado
archivo.html	En la misma carpeta
carpeta/archivo.html	Dentro de una subcarpeta
../archivo.html	Una carpeta arriba
../../archivo.html	Dos carpetas arriba
/archivo.html	Desde la raíz del dominio

Error común

Las rutas que empiezan con / funcionan en un servidor, pero no cuando abres el archivo con doble clic (file:///), porque la "raíz" pasa a ser tu disco duro. Usa Live Server mientras desarrollas.

Nunca hagas esto

Enlaces como C:\Users\ana\Desktop\sitio\contacto.html. Funcionan solo en tu computadora y se rompen en cuanto subes el sitio.

Abrir en una pestaña nueva: target y rel

<a href="https://instagram.com/cafearoma" target="_blank" rel="noopener noreferrer">
  Síguenos en Instagram
</a>

• target="_blank" abre el enlace en una pestaña nueva.
• rel="noopener" impide que la página abierta controle la tuya mediante window.opener (un riesgo de seguridad conocido como tabnabbing). Los navegadores modernos ya lo aplican por defecto, pero agrégalo por compatibilidad.
• rel="noreferrer" además oculta desde qué página llegó el visitante.

¿Cuándo usar _blank? Con moderación: para sitios externos o documentos PDF. Los enlaces internos deben abrirse en la misma pestaña; el usuario decide si quiere otra (con Ctrl+clic o clic con la rueda).

Otros valores útiles de rel:

Valor	Uso
nofollow	Le pide a Google no seguir ni dar autoridad al enlace.
sponsored	Enlaces pagados o de afiliados.
ugc	Contenido generado por usuarios (comentarios, foros).

Anclas: saltar a una sección

Cualquier elemento con id puede ser destino de un enlace usando #:

<nav>
  <a href="#menu">Menú</a>
  <a href="#contacto">Contacto</a>
</nav>

<section id="menu">
  <h2>Menú</h2>
</section>

<section id="contacto">
  <h2>Contacto</h2>
</section>

<!-- Volver arriba: # solo lleva al inicio del documento -->
<a href="#">Volver arriba</a>

<!-- Ancla en otra página -->
<a href="servicios.html#precios">Ver precios</a>

Buena práctica

Agrega html { scroll-behavior: smooth; } en tu CSS para que el salto sea animado. Y si tienes un encabezado fijo, usa scroll-margin-top en las secciones para que el título no quede tapado.

Correo, teléfono y WhatsApp

<!-- Abre la app de correo -->
<a href="mailto:hola@cafearoma.mx">hola@cafearoma.mx</a>

<!-- Con asunto y cuerpo (espacios codificados como %20) -->
<a href="mailto:hola@cafearoma.mx?subject=Reservación&body=Hola,%20quiero%20reservar">
  Reservar por correo
</a>

<!-- Llama desde el celular: usa formato internacional sin espacios -->
<a href="tel:+525512345678">55 1234 5678</a>

<!-- WhatsApp: número con código de país, sin + ni espacios -->
<a href="https://wa.me/525512345678?text=Hola,%20quiero%20información" target="_blank" rel="noopener">
  Escríbenos por WhatsApp
</a>

<!-- SMS -->
<a href="sms:+525512345678">Enviar SMS</a>

Para negocios locales, los enlaces tel: y de WhatsApp son de lo que más convierte en celulares: un clic y el cliente ya está llamando.

Descargas

<!-- download fuerza la descarga en lugar de abrir el archivo -->
<a href="docs/menu-2026.pdf" download>Descargar menú (PDF, 1.2 MB)</a>

<!-- También puedes sugerir un nombre de archivo -->
<a href="docs/m26.pdf" download="menu-cafe-aroma.pdf">Descargar menú</a>

El atributo download solo funciona con archivos del mismo dominio. Indica siempre el tipo y el peso del archivo: el usuario agradece saber qué va a descargar.

Texto de enlace accesible

El texto del enlace debe explicar a dónde lleva, incluso fuera de contexto. Los lectores de pantalla pueden mostrar una lista de todos los enlaces de la página.

<!-- ❌ Mal: "clic aquí" no dice nada -->
<p>Para ver el menú, <a href="menu.html">haz clic aquí</a>.</p>

<!-- ✅ Bien -->
<p>Consulta <a href="menu.html">nuestro menú completo</a>.</p>

<!-- Enlace con solo imagen: el alt funciona como texto del enlace -->
<a href="/">
  <img src="img/logo.svg" alt="Café Aroma - Inicio">
</a>

Enlaces o botones

Una regla que te evitará muchos problemas:

• Enlace (<a>): te lleva a otro lugar (otra página, una sección, un archivo).
• Botón (<button>): hace algo en la página actual (abrir un menú, enviar un formulario, agregar al carrito).

No uses <a href="#"> para abrir un modal ni un <div> con clic para navegar. Lo retomarás en Accesibilidad.

Casos de uso reales

• Landing de una sola página: menú con anclas #servicios, #precios, #contacto.
• Botón flotante de WhatsApp en el sitio de un dentista o un taller.
• Restaurante: menú en PDF descargable y teléfono clicable para pedidos.
• Blog: enlaces externos con target="_blank" y rel="noopener"; enlaces de afiliado con rel="sponsored".

Ejercicios

1. Crea un menú de navegación con anclas a tres secciones (#inicio, #servicios, #contacto) y un enlace "Volver arriba".
2. Desde el archivo blog/2026/articulo.html, escribe el enlace relativo hacia index.html que está en la raíz del sitio.
3. Crea una sección de contacto con correo (con asunto prellenado), teléfono clicable y enlace de WhatsApp que se abra en una pestaña nueva de forma segura.

Ver solución

<!-- Ejercicio 1 -->
<nav>
  <a href="#inicio">Inicio</a>
  <a href="#servicios">Servicios</a>
  <a href="#contacto">Contacto</a>
</nav>
<section id="inicio"><h1>Bienvenido</h1></section>
<section id="servicios"><h2>Servicios</h2></section>
<section id="contacto"><h2>Contacto</h2></section>
<a href="#">Volver arriba</a>

<!-- Ejercicio 2: sube dos niveles (2026 → blog → raíz) -->
<a href="../../index.html">Inicio</a>

<!-- Ejercicio 3 -->
<section id="contacto">
  <h2>Contacto</h2>
  <p>Correo: <a href="mailto:hola@taller.mx?subject=Cotización">hola@taller.mx</a></p>
  <p>Teléfono: <a href="tel:+528112345678">81 1234 5678</a></p>
  <p>
    <a href="https://wa.me/528112345678" target="_blank" rel="noopener noreferrer">
      Escríbenos por WhatsApp
    </a>
  </p>
</section>

Resumen

• <a href="..."> crea un enlace; el texto debe describir el destino.
• Rutas absolutas para otros sitios; relativas para tu sitio (../ sube un nivel).
• target="_blank" con rel="noopener" para abrir pestañas nuevas de forma segura.
• #id salta a una sección; mailto:, tel: y wa.me conectan con apps del usuario.
• download fuerza la descarga de archivos del mismo dominio.
• Enlaces para ir, botones para hacer.