Enlaces HTML: anclas, botones, imágenes y nuevas pestañas
Guía de enlaces HTML
Enlaces HTML: anclas, botones, imágenes con enlace y nuevas pestañas | We.Inc
Crea enlaces HTML que funcionen: enlaces a secciones con scroll suave bajo un encabezado fijo, nuevas pestañas, enlaces con estilo de botón, imágenes con enlace y enlaces mailto, tel y de descarga.
Un enlace HTML es un elemento <a> con un href: <a href="/pricing">See pricing</a>. Apunta href a una página, a #id para saltar dentro de la misma página, o a mailto: y tel: para iniciar un correo o una llamada. Añade target="_blank" para abrir una nueva pestaña, y usa un <button>, no un enlace, para las acciones que cambian algo.
Todos los tipos de enlace que necesita un sitio pequeño, cada uno con código que puedes editar y un resultado en vivo. La demo de enlaces a secciones muestra el problema del encabezado fijo y su solución de una línea, y la sección de botones aclara cuándo un enlace debe parecer un botón y cuándo debe serlo.
Elige el tipo de enlace que necesitas en las secciones de abajo.
Edita el ejemplo. El marco de resultado es una página real, así que los enlaces a secciones hacen scroll y los anillos de foco aparecen al pulsar Tab.
Copia el fragmento y sustituye la dirección y el texto del enlace por los tuyos.
Comprueba que el texto del enlace se entiende por sí solo, ya que quienes usan lectores de pantalla suelen recorrer una lista de enlaces sin las palabras que los rodean.
Escribe un texto de enlace que nombre el destino, como Descarga el menú de primavera, y no haz clic aquí. Ayuda a quien escanea la página y ayuda a los buscadores a entender la página de destino.
Usa rutas relativas (/contact) para las páginas de tu propio sitio, así los enlaces siguen funcionando en una dirección de vista previa o en un dominio nuevo.
Añade una pista en el texto de los enlaces que abren nueva pestaña, como (se abre en una nueva pestaña), para que nadie se sorprenda cuando el botón Atrás no haga nada.
Mantén los id de los enlaces a secciones cortos, en minúsculas y estables. Otras personas los guardarán en marcadores y los compartirán.
Preguntas frecuentes
¿Sigo necesitando rel="noopener" con target="_blank"?
Los navegadores actuales aplican automáticamente el comportamiento noopener a los enlaces con target="_blank", así que la página abierta no puede acceder a la tuya mediante window.opener. Añadir rel="noopener" sigue sin hacer daño y protege a los navegadores muy antiguos. Añade también noreferrer si no quieres que el otro sitio vea qué página le envió al visitante.
¿Debo usar un enlace o un botón?
Usa <a href> cuando el clic lleva a alguien a una nueva dirección que podría guardar en marcadores o abrir en una nueva pestaña. Usa <button> cuando el clic hace algo en la página actual, como abrir un menú, enviar un formulario o añadir algo a la cesta. Puedes dar a cualquiera de los dos el aspecto del otro.
¿Por qué mi enlace a una sección esconde el título bajo el encabezado fijo?
El navegador desplaza el destino hasta el borde superior de la ventana, que es donde está tu encabezado fijo. Añade scroll-margin-top a los destinos, con la altura del encabezado más un poco de margen, y el título quedará justo debajo.
¿Por qué el atributo download no funciona con mi archivo?
Los navegadores solo respetan download para archivos del mismo origen que la página, o para direcciones blob: y data:. Con un archivo de otro dominio, el enlace simplemente lo abre, salvo que ese servidor envíe una cabecera Content-Disposition que le indique al navegador que lo guarde.
¿Cómo añado un asunto a un enlace mailto?
Añádelo como query string: mailto:[email protected]?subject=Booking%20request&body=Hi. Los espacios y los caracteres especiales deben ir codificados por porcentaje, así que un espacio pasa a ser %20.
Anatomía de un enlace
Un <a> sin href es solo un marcador de posición: no se puede enfocar con el teclado y no hace nada al hacer clic. El href es lo que lo convierte en enlace. El texto entre las etiquetas es el nombre accesible, y en un enlace con imagen ese papel lo cumple el texto alt de la imagen.
Otros atributos afinan el enlace. target elige dónde se abre, rel describe la relación con la página de destino (nofollow, noopener, noreferrer, sponsored), download pide al navegador que guarde el archivo en lugar de mostrarlo, y hreflang o type describen el destino.
Los botones y los enlaces son controles distintos
Quienes usan el teclado pulsan Enter para seguir un enlace, y Enter o Espacio para pulsar un botón. Los lectores de pantalla los anuncian de forma diferente, y solo los enlaces tienen un menú contextual con Abrir en una nueva pestaña. Cuando se usa un enlace para una acción, o un div para cualquiera de los dos, algunos de esos comportamientos desaparecen.
El estilo visual es libre. Un enlace Regístrate en el encabezado puede parecer un botón sólido, y un botón Quitar en una lista puede parecer texto subrayado normal. Elige el elemento según lo que ocurre y luego dale el estilo que necesite el diseño.
Hacer accesibles los enlaces
Los enlaces deben reconocerse sin depender solo del color. En el texto principal lo consigue un subrayado; en las barras de navegación suele dejarlo claro la disposición. Mantén un contorno de foco visible y, si sustituyes el predeterminado del navegador, asegúrate de que el nuevo tenga suficiente contraste.
Evita varios enlaces con el mismo texto que llevan a sitios distintos, como una fila de enlaces Leer más. Escribe textos diferentes o añade un span oculto visualmente que complete la frase para quienes usan lectores de pantalla.
El enlace básico
Direcciones absolutas, relativas y de fragmento
Las rutas relativas se resuelven a partir de la página actual; una ruta que empieza por / parte de la raíz del sitio.
Enlaces a secciones, scroll suave y encabezados fijos
Dale un id al destino y enlázalo con #id. scroll-behavior: smooth anima el salto, y scroll-margin-top evita que un encabezado fijo tape el título.
Enlaces a secciones bajo un encabezado fijo
Haz clic en un enlace de la barra. Cada sección queda justo debajo del encabezado gracias a scroll-margin-top. Borra esa línea para ver el problema que resuelve.
Abrir un enlace en una nueva pestaña
target="_blank" con una pista visible
Los navegadores actuales ya aplican noopener, pero mantenerlo no cuesta nada. noreferrer además oculta la dirección de tu página al otro sitio.
Enlaces con aspecto de botón y botones de verdad
Qué elemento usar
El clic…
Elemento
Ejemplo
Lleva a otra dirección
<a href>
Regístrate, Ver planes, Leer la guía
Envía un formulario
<button type="submit">
Enviar mensaje, Pagar ahora
Cambia algo en esta página
<button type="button">
Abrir menú, Añadir a la cesta, Mostrar más
Un enlace con estilo de botón junto a un botón de verdad
Los dos se ven iguales. Solo el enlace se puede abrir en una nueva pestaña; solo el botón sirve como acción dentro de un formulario.
Imágenes con enlace
Una imagen como enlace
El texto alt nombra el destino, porque es el único texto del enlace. Aquí la imagen es un pequeño SVG en línea para que la demo funcione sin conexión.
Enlaces de correo, teléfono y descarga
mailto y tel
Escribe los números de teléfono en el href en formato internacional y sin espacios. El texto visible puede tener el formato que quieras.
El atributo download
El valor, si lo indicas, sugiere un nombre de archivo. Solo se aplica a archivos de tu propio origen o a direcciones blob: y data:.