Enlaces

La H de HTML viene de hipertexto: texto que enlaza con otro texto. Un solo elemento, a, crea todos los enlaces de la web.

El elemento ancla

Un enlace se crea con el elemento <a>, abreviatura de anchor (ancla). Su atributo href contiene la dirección de destino, y su contenido es el texto en el que se hace clic. En <a href="https://developer.mozilla.org/">MDN Web Docs</a>, las palabras MDN Web Docs aparecen subrayadas, y al activarlas se carga esa dirección. Los enlaces funcionan con un mouse, con un dedo o con el teclado: presiona Tab para pasar de un enlace a otro y Enter para seguir uno. Sin href, un <a> es solo un marcador de posición y no se puede alcanzar con Tab.

Direcciones absolutas y relativas

Una URL absoluta lo contiene todo: el esquema (https:), el dominio y la ruta, por ejemplo https://example.com/menu/bread.html. Úsala para enlaces a otros sitios. Una URL relativa omite las partes que son iguales a las de la página actual. En una página ubicada en https://example.com/menu/index.html, el enlace bread.html significa el archivo de la misma carpeta, ../about.html significa una carpeta más arriba, y /contact.html parte de la raíz del sitio. Los enlaces relativos siguen funcionando cuando todo el sitio se muda a un dominio nuevo.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

Enlaces dentro de la misma página

Dale un id a cualquier elemento, y un enlace cuyo href sea un numeral seguido de ese id saltará directamente a él. <a href="#hours"> desplaza la página hasta <h2 id="hours">. Un id debe ser único dentro de la página y no puede contener espacios. Los artículos largos usan esto para un índice, y muchos sitios ponen un enlace para saltar arriba de todo (Ir al contenido principal) para que quienes usan el teclado no tengan que recorrer con Tab todo el menú en cada página.

Correo, teléfono y descargas

Otros esquemas abren otros programas. mailto:hello@example.com abre un correo nuevo en el programa de correo de quien visita, y tel:+82212345678 ofrece llamar al número en un teléfono. Agregar el atributo download a un enlace le pide al navegador que guarde el archivo en lugar de abrirlo. Estos enlaces son prácticos, pero di lo que hacen en el texto del enlace, porque la gente no espera que se abra de golpe un programa de correo.

Pestañas nuevas y buen texto de enlace

target="_blank" abre el enlace en una pestaña nueva. Úsalo con moderación: le quita el control a quien visita, y el botón Atrás ya no lo regresa. Cuando lo uses, menciónalo en el texto del enlace, por ejemplo (se abre en una pestaña nueva). Lo más importante de todo es el propio texto del enlace. Quienes usan lectores de pantalla suelen abrir una lista de todos los enlaces de una página, y una lista de diez entradas que dicen haz clic aquí o leer más no les dice nada. Escribe un texto que tenga sentido fuera de contexto: Descarga el horario de 2026, no haz clic aquí.

Por defecto, los navegadores subrayan los enlaces y los pintan de azul, y muestran en morado los enlaces visitados. Puedes cambiar el estilo de los enlaces con CSS, pero conserva algo además del color, como el subrayado, para que las personas que no distinguen los colores sigan viendo qué palabras son enlaces. Cuando un enlace tiene el foco del teclado, los navegadores dibujan un anillo de foco a su alrededor; nunca quites ese anillo sin poner un reemplazo claro en su lugar.