Docs ejecutables de HTML: Enlaces (a href)

Q: ¿Cómo se hace un link en HTML?

Usa el elemento ancla: Example . href es el destino y el texto entre las etiquetas es lo que el lector pulsa.

Q: ¿Cómo enlazo a una parte concreta de una página?

Dale un id al elemento de destino y enlázalo con una almohadilla: FAQ y FAQ . Desde otra página, añade la almohadilla a la URL: .

Q: ¿Por qué mi enlace va a la página equivocada cuando escribo www?

Sin https://, el navegador trata www.example.com como una ruta relativa de tu propio sitio, así que el enlace va a algo como yoursite.com/www.example.com. Escribe siempre el esquema en los enlaces externos: href="https://www.example.com".

Q: ¿Una etiqueta a puede contener un div?

Sí. En HTML5 un puede envolver contenido de bloque como un , un encabezado y un párrafo, que es como se construyen las tarjetas enlazadas enteras. No puede contener otro enlace, un botón ni ningún otro elemento interactivo.

Cómo hacer un link en HTML

Un enlace es un elemento ancla, <a>, con un atributo href. href es a dónde va el enlace; el contenido entre las etiquetas es lo que el lector pulsa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Los navegadores muestran los enlaces en azul y subrayados, y cambian el cursor por una mano. La última línea muestra por qué importa href: sin él, <a> es texto normal. No recibe el foco, no se puede pulsar y no tiene estilo de enlace.

URL absolutas y relativas

El valor de href decide a dónde va el enlace. Las formas principales:

`href`	Va a
`https://example.com/page`	Una URL absoluta: exactamente esa dirección
`/about`	`about` en la raíz del sitio actual
`about.html`	`about.html` en la misma carpeta que la página actual
`../index.html`	`index.html` una carpeta más arriba
`#pricing`	El elemento con `id="pricing"` de esta página
`/help#faq`	La sección `faq` de otra página de este sitio
`mailto:hi@example.com`	Un correo nuevo en la aplicación de correo del lector
`tel:+15551234567`	Una llamada, en los dispositivos que pueden hacerla

Usa URL absolutas para otros sitios y rutas relativas a la raíz (/about) dentro del tuyo: siguen funcionando cuando la página que las contiene se mueve a otra carpeta.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

La última línea es el error de enlace más común. Sin https://, el navegador lee www.wikipedia.org como un nombre de archivo en la carpeta actual.

Los enlaces de correo y de teléfono tienen su propia página: enlaces mailto en HTML.

Enlazar a una sección de la página

Cualquier elemento con un id es un destino. Enlázalo con # seguido del id, y el navegador se desplaza hasta él. Haz clic en los enlaces de la vista previa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Algunos detalles:

El id tiene que coincidir exactamente, incluidas mayúsculas y minúsculas. href="#FAQ" no encuentra id="faq".
href="#top" y href="#" suben al principio de la página aunque ningún elemento tenga el id top.
El selector :target da estilo a la sección a la que apunta la URL en ese momento. Aquí se resalta en una página real; la vista previa se desplaza sin cambiar su dirección, así que el resaltado no se ve en ella.
Para enlazar a una sección de otra página, añade la almohadilla a la URL de esa página: <a href="/docs/html/table#caption">.

Enlaces a secciones bajo un encabezado fijo

Un encabezado sticky o fijo tapa la parte superior de la sección a la que saltas. scroll-margin-top en los destinos le deja sitio, y scroll-behavior: smooth anima el salto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Borra la línea scroll-margin-top y vuelve a hacer clic en Two: el encabezado queda oculto detrás de la barra oscura.

Enlaces de descarga

El atributo download le pide al navegador que guarde el archivo en lugar de abrirlo. Su valor, si le das uno, es el nombre de archivo sugerido:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download solo funciona con archivos del mismo origen que la página (mismo esquema, host y puerto) y con URL data: y blob:. Con un archivo de otro origen, aunque sea un subdominio, los navegadores lo ignoran y abren el archivo como un enlace normal. El servidor puede forzar la descarga de cualquier archivo con la cabecera Content-Disposition: attachment.

Texto de enlace que tenga sentido

Quienes usan lectores de pantalla suelen recorrer una página enlace por enlace, oyendo solo el texto del enlace. "Haz clic aquí" y "Leer más" no les dicen nada.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

El atributo title muestra un texto de ayuda al pasar el ratón, pero no aparece en pantallas táctiles ni para la mayoría de quienes usan el teclado, así que no pongas nada importante en él.

Convertir una tarjeta entera en un enlace

Un <a> puede envolver contenido de bloque: un encabezado, una imagen y un párrafo pueden ser un solo enlace. Así se construyen las tarjetas clicables.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block hace clicable toda la caja, no solo el texto. Mantén corto el contenido de la tarjeta, porque un lector de pantalla lo lee entero como nombre del enlace. Y nunca pongas otro enlace o un botón dentro: los elementos interactivos no se pueden anidar en <a>.

Otros atributos de la etiqueta a

Atributo	Qué hace
`href`	El destino. Sin él, `<a>` no es un enlace
`target`	Dónde abrirlo; `target="_blank"` abre una pestaña nueva, consulta abrir un enlace en una pestaña nueva
`rel`	La relación con el destino: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Guardar el archivo en lugar de abrirlo
`hreflang`	El idioma de la página enlazada, como pista
`referrerpolicy`	Cuánto de la URL actual se envía como referente

Errores comunes

Sin esquema en una URL externa. href="www.site.com" es una ruta relativa. Escribe https://.
<a href="#"> para una acción de JavaScript. Sube al principio de la página y añade # a la URL. Si al hacer clic no se va a ningún sitio, usa un <button>.
Un enlace dentro de otro enlace, o un botón dentro de un enlace. Los dos son HTML no válido: un segundo <a> hace que el analizador cierre el primero antes de tiempo, y un clic en un botón dentro de un enlace no tiene un destino claro.
Espacios en los nombres de archivo. href="my file.html" suele funcionar porque el navegador codifica el espacio, pero my-file.html evita la duda por completo.
"Haz clic aquí" como texto del enlace. Describe el destino en su lugar.
Mayúsculas distintas en el id. #Pricing e id="pricing" son diferentes.

Preguntas frecuentes

¿Cómo se hace un link en HTML?

Usa el elemento ancla: <a href="https://example.com">Example</a>. href es el destino y el texto entre las etiquetas es lo que el lector pulsa.

¿Qué significa href?

Hypertext reference (referencia de hipertexto). Contiene la URL a la que apunta el enlace: una dirección completa, una ruta del mismo sitio como /about, una sección de la página como #pricing, o un esquema como mailto:.

¿Cómo enlazo a una parte concreta de una página?

Dale un id al elemento de destino y enlázalo con una almohadilla: <h2 id="faq">FAQ</h2> y <a href="#faq">FAQ</a>. Desde otra página, añade la almohadilla a la URL: <a href="/help#faq">.

¿Por qué mi enlace va a la página equivocada cuando escribo www?

Sin https://, el navegador trata www.example.com como una ruta relativa de tu propio sitio, así que el enlace va a algo como yoursite.com/www.example.com. Escribe siempre el esquema en los enlaces externos: href="https://www.example.com".

¿Una etiqueta a puede contener un div?

Sí. En HTML5 un <a> puede envolver contenido de bloque como un <div>, un encabezado y un párrafo, que es como se construyen las tarjetas enlazadas enteras. No puede contener otro enlace, un botón ni ningún otro elemento interactivo.

Conceptos relacionados