Enlaces en HTML

Los enlaces son lo que convierte un montón de páginas en una web: permiten saltar de una página a otra con un clic. Se crean con la etiqueta <a> (de anchor, ancla).

<a href="https://developer.mozilla.org/es/">Documentación de MDN</a>

• href es el destino: a dónde lleva el enlace.
• El texto entre las etiquetas es lo que la persona ve y pulsa.

En esta lección verás todos los tipos de destino, cómo controlar dónde se abre un enlace, qué significan los valores de rel, cómo crear enlaces de descarga, de correo y de teléfono, y cómo escribir textos de enlace que sirvan de verdad.

Tipos de destino

Otra web (URL absoluta). Empieza por https://:

<a href="https://www.wikipedia.org">Wikipedia</a>

Otra página de tu web (URL relativa). Solo pones la ruta hasta el archivo, sin dominio:

<a href="contacto.html">Contacto</a>          <!-- en la misma carpeta -->
<a href="blog/primer-post.html">Mi primer post</a>  <!-- dentro de la carpeta blog -->
<a href="../index.html">Volver al inicio</a>   <!-- una carpeta hacia arriba -->

.. significa “sube una carpeta”. Las rutas tienen bastantes trampas, así que tienen su propia lección: rutas de archivos.

Una sección de la misma página. Primero le das un id al elemento de destino y luego enlazas con # y ese id:

<a href="#precios">Ver precios</a>
...
<h2 id="precios">Precios</h2>

Un email o un teléfono:

<a href="mailto:hola@ejemplo.com">Escríbenos</a>
<a href="tel:+34600000000">Llámanos</a>

Veremos estos enlaces especiales con más detalle un poco más abajo.

Abrir en una pestaña nueva

Con target="_blank" el enlace se abre en otra pestaña. Añade también rel="noopener" por seguridad: impide que la página nueva pueda controlar la tuya.

<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>

Úsalo con moderación. A la mayoría de la gente le gusta decidir por sí misma si abre una pestaña nueva.

Los valores de target

Valor	Dónde se abre el enlace
_self (por defecto)	En la misma pestaña
_blank	En una pestaña nueva
_parent	En el marco padre (si la página está dentro de un <iframe>)
_top	En la ventana completa, saliendo de todos los marcos
Un nombre cualquiera	En la pestaña o el <iframe> con ese nombre; si no existe, en una nueva

¿Cuándo tiene sentido _blank? Cuando abandonar la página haría perder trabajo: un enlace a la política de privacidad dentro de un formulario a medio rellenar, o la ayuda de un paso de una compra. En esos casos, avisa en el texto:

<a href="/privacidad/" target="_blank" rel="noopener">política de privacidad (se abre en otra pestaña)</a>

El atributo rel

rel describe la relación entre tu página y la página enlazada. Admite varios valores separados por espacios:

Valor	Qué significa
noopener	La página nueva no puede acceder a la tuya con window.opener
noreferrer	No se envía a la otra web la dirección de la que vienes (implica noopener)
nofollow	No respaldas ese enlace: los buscadores no deben tenerlo en cuenta para posicionar
sponsored	Enlace pagado o de afiliados
ugc	Enlace escrito por usuarios (comentarios, foros)

<!-- Enlace de afiliados a una tienda -->
<a href="https://tienda.example/zapatillas?ref=miblog" rel="sponsored">Zapatillas de trail</a>

<!-- Enlace dentro de un comentario de un usuario -->
<a href="https://web-del-usuario.example" rel="ugc nofollow">su web</a>

Consejo: los navegadores actuales ya aplican noopener automáticamente a los enlaces con target="_blank". Aun así, se sigue escribiendo por costumbre y por compatibilidad con navegadores antiguos. Usa noreferrer solo si no quieres que la otra web sepa de dónde llega la visita.

Una imagen como enlace

Cualquier contenido puede ser un enlace, incluida una imagen. Muy habitual con los logos, que llevan al inicio:

<a href="/">
  <img src="/img/logo.png" alt="DevSchool, ir al inicio">
</a>

Cuando la imagen es lo único que hay dentro del enlace, su alt debe decir a dónde lleva, no cómo es el logo.

Descargar un archivo

Con el atributo download, el navegador descarga el archivo en lugar de abrirlo:

<a href="/pdf/temario.pdf" download>Descargar el temario (PDF, 2 MB)</a>

Indica el formato y el tamaño en el texto: ayuda a decidir si merece la pena descargarlo.

Si le das un valor a download, será el nombre con el que se guarde el archivo:

<a href="/pdf/tmp-83421.pdf" download="horario-piscina-2026.pdf">Horario de la piscina (PDF, 300 KB)</a>

Cuidado: download solo funciona con archivos de tu propio dominio. Si el enlace apunta a otra web, el navegador lo ignora y abre el archivo normalmente.

Enlaces de correo y de teléfono

mailto:

Abre el programa de correo con el destinatario ya puesto. Puedes añadir asunto y texto con ?subject= y &body=:

<a href="mailto:secretaria@instituto.example?subject=Duda%20sobre%20la%20matr%C3%ADcula">
  Escribir a secretaría
</a>

Los espacios y las tildes deben ir codificados (%20 es un espacio; %C3%AD, una í). En JavaScript, encodeURIComponent('Duda sobre la matrícula') te da el texto ya preparado. Escribe siempre la dirección también a la vista: no todo el mundo tiene un programa de correo configurado.

tel:

En el móvil, pulsar el enlace inicia la llamada. Escribe el número en formato internacional, sin espacios, con el prefijo del país:

<a href="tel:+34987654321">987 65 43 21</a>

El texto visible puede tener el formato que quieras; lo importante es que el href sea correcto.

Anclas: saltar dentro de la página

Ya has visto que href="#precios" salta al elemento con id="precios". Algunos detalles más:

• Puedes combinar página y ancla: href="tarifas.html#familias" abre tarifas.html y baja hasta id="familias".
• href="#top" o href="#" vuelven al principio de la página.
• El id debe coincidir exactamente, con mayúsculas incluidas: #Precios no lleva a id="precios".

Un índice al principio de un artículo largo es un uso típico:

<nav aria-label="Índice">
  <ol>
    <li><a href="#material">Material necesario</a></li>
    <li><a href="#tecnica">Técnica básica</a></li>
    <li><a href="#seguridad">Seguridad</a></li>
  </ol>
</nav>

Consejo: si tu web tiene una cabecera fija, al saltar a un ancla el título queda tapado. Se arregla en CSS con scroll-margin-top: 80px; en los elementos de destino.

Enlace para saltar al contenido

Quien navega con el teclado tendría que recorrer todo el menú en cada página. Un enlace de salto como primer elemento del <body> le permite ir directo al contenido:

<body>
  <a class="saltar" href="#contenido">Saltar al contenido</a>
  <header>...</header>
  <main id="contenido">...</main>
</body>

Con CSS se esconde y solo aparece al recibir el foco con Tab. Lo verás completo en accesibilidad web.

Enlaces a otros idiomas: hreflang

Si enlazas a una página en otro idioma, hreflang lo indica. Así los buscadores y los lectores de pantalla lo saben antes de abrirla:

<a href="/en/" hreflang="en" lang="en">English version</a>
<a href="https://ca.wikipedia.org/wiki/Barcelona" hreflang="ca">Barcelona a la Viquipèdia (en catalán)</a>

hreflang habla del idioma de la página de destino; lang, del idioma del texto del enlace. En el primer ejemplo coinciden los dos.

¿Enlace o botón?

Es una duda muy común en cuanto empiezas con JavaScript:

• <a href> si lleva a otro sitio: otra página, otra sección, un archivo.
• <button> si hace algo en la página: abrir un menú, enviar un formulario, añadir al carrito.

<!-- Mal: un enlace que no lleva a ningún sitio -->
<a href="#" onclick="abrirMenu()">Menú</a>

<!-- Bien -->
<button type="button" onclick="abrirMenu()">Menú</button>

Los lectores de pantalla anuncian “enlace” o “botón” y la persona espera comportamientos distintos. Además, un enlace se activa con Intro, pero un botón también con la barra espaciadora.

Escribe buenos textos de enlace

El texto del enlace debe decir a dónde lleva. Evita “haz clic aquí”:

<!-- Mal -->
Para ver las tarifas, <a href="tarifas.html">haz clic aquí</a>.

<!-- Bien -->
Consulta las <a href="tarifas.html">tarifas de este año</a>.

Un buen texto ayuda a las personas que usan lectores de pantalla (que a menudo navegan saltando de enlace en enlace) y ayuda a Google a entender de qué trata la página enlazada.

Otras pautas para el texto del enlace:

• Que se entienda fuera de contexto. Muchos lectores de pantalla muestran una lista con todos los enlaces; “Leer más” repetido diez veces no dice nada.
• Que no sea la URL completa, salvo que la dirección sea lo importante (por ejemplo, en un documento impreso).
• Que no sea demasiado largo. Enlaza las palabras clave, no el párrafo entero.
• Si varios enlaces llevan al mismo sitio, usa el mismo texto; si llevan a sitios distintos, textos distintos.

Errores frecuentes

• Olvidar https:// en un enlace externo: href="www.google.com" se interpreta como una ruta relativa de tu propia web.
• Un id que no coincide (mayúsculas, tildes, espacios) y el ancla no salta.
• Enlaces vacíos, por ejemplo con solo un icono sin texto ni aria-label.
• Usar <a href="#"> como botón. Si hace una acción, es un <button>.
• target="_blank" en todos los enlaces. Rompe el botón Atrás y desconcierta.
• Tildes o espacios sin codificar en un mailto: con asunto.
• Poner un enlace dentro de otro. Está prohibido anidar <a>.

Resumen

Quieres…	Escribe
Enlazar otra web	<a href="https://...">
Enlazar otra página tuya	<a href="contacto.html">
Saltar a una sección	<a href="#id">
Abrir en otra pestaña	target="_blank" rel="noopener"
No respaldar un enlace	rel="nofollow", sponsored o ugc
Descargar un archivo	download (o download="nombre.pdf")
Abrir el correo	href="mailto:...?subject=..."
Llamar por teléfono	href="tel:+34..."
Indicar el idioma del destino	hreflang="en"
Hacer una acción	<button>, no <a>

<a ___="https://devschool.es">DevSchool</a>

<a href="www.wikipedia.org">Wikipedia</a>