<a>: elemento de ancla HTML

Pruébalo

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Atributos

Los atributos de este elemento incluyen los atributos globales.

attributionsrc

Especifica que quieres que el navegador envíe una cabecera Attribution-Reporting-Eligible. En el lado del servidor, esto se usa para activar el envío de una cabecera Attribution-Reporting-Register-Source en la respuesta, con el fin de registrar una fuente de atribución basada en navegación.

El navegador almacena los datos de la fuente asociados a la fuente de atribución basada en la navegación (tal como se proporcionan en la cabecera de respuesta Attribution-Reporting-Register-Source) cuando el usuario hace clic en el enlace. Consulta la Attribution Reporting API para más detalles.

Existen dos versiones de este atributo que puedes establecer:

• Booleana, es decir, solo el nombre attributionsrc. Esto especifica que quieres que la cabecera Attribution-Reporting-Eligible se envíe al mismo servidor al que apunta el atributo href. Esto es adecuado cuando gestionas el registro de la fuente de atribución en el mismo servidor.

• Un valor que contiene una o más URL, por ejemplo:

  html

  attributionsrc="https://a.example/register-source
  https://b.example/register-source"
  

  Esto es útil cuando el recurso solicitado no está en un servidor que controlas, o simplemente quieres gestionar el registro de la fuente de atribución en un servidor distinto. En este caso, puedes especificar una o más URL como valor de attributionsrc. Cuando ocurre la solicitud del recurso, la cabecera Attribution-Reporting-Eligible se enviará a las URL especificadas en attributionsrc, además de al origen del recurso. Estas URL pueden entonces responder con la cabecera Attribution-Reporting-Register-Source para completar el registro.

  Nota: Especificar varias URL permite registrar múltiples fuentes de atribución para una misma funcionalidad. Por ejemplo, podrías tener distintas campañas cuyo éxito quieras medir, lo que implica generar diferentes informes con distintos datos.

Los elementos <a> no se pueden usar como disparadores de atribución, solo como fuentes.

download

Hace que el navegador trate la URL enlazada como una descarga. Se puede usar con o sin un valor filename:

• Sin un valor, el navegador sugerirá un nombre de archivo o extensión, generado a partir de varias fuentes:

  • La cabecera HTTP Content-Disposition
  • El último segmento en la ruta de la URL
  • El tipo de medio (a partir de la cabecera Content-Type, el inicio de una data: URL, o Blob.type para una blob: URL)

• filename: definir un valor lo sugiere como nombre de archivo. Los caracteres / y \ se convierten en guiones bajos (_). Es posible que los sistemas de archivos no permitan otros caracteres en los nombres de archivo, por lo que los navegadores ajustarán el nombre sugerido si es necesario.

Nota:

• download solo funciona para URL del mismo origen, o con los esquemas blob: y data:.
• La forma en que los navegadores gestionan las descargas varía según el navegador, la configuración del usuario y otros factores. Es posible que se pida confirmación al usuario antes de iniciar una descarga, que el archivo se guarde automáticamente, o que se abra automáticamente, ya sea en una aplicación externa o en el propio navegador.
• Si la cabecera Content-Disposition tiene información distinta a la del atributo download, el comportamiento resultante puede variar:
  • Si la cabecera especifica un filename, este tiene prioridad sobre el nombre de archivo especificado en el atributo download.
  • Si la cabecera especifica una disposición inline, Chrome y Firefox priorizan el atributo y lo tratan como una descarga. Las versiones antiguas de Firefox (anteriores a la 82) priorizan la cabecera y muestran el contenido en línea.

href

La URL a la que apunta el hipervínculo. Los enlaces no se limitan a las URL basadas en HTTP: pueden usar cualquier esquema de URL compatible con los navegadores:

• Números de teléfono con URLs tel:
• Direcciones de correo electrónico con URLs mailto:
• Mensajes de texto SMS con URLs sms:
• Código ejecutable con URLs javascript:
• Aunque es posible que los navegadores web no admitan otros esquemas de URL, los sitios web pueden hacerlo mediante registerProtocolHandler()

Además, otras características de las URL permiten ubicar partes específicas del recurso, incluyendo:

• Secciones de una página mediante fragmentos de documento
• Porciones de texto específicas mediante fragmentos de texto
• Fragmentos de archivos multimedia mediante fragmentos de medios

hreflang

Indica el idioma humano de la URL enlazada. No tiene funcionalidad integrada. Los valores permitidos son los mismos que los del atributo global lang.

interestfor

Define el elemento <a> como un invocador de interés (interest invoker). Su valor es el id del elemento objetivo, que se verá afectado de alguna manera (normalmente mostrándose u ocultándose) cuando se muestre o se pierda el interés en el elemento invocador (por ejemplo, al pasar o quitar el cursor, o al enfocarlo o desenfocarlo). Consulta Uso de invocadores de interés para más detalles y ejemplos.

ping

Una lista de URLs separadas por espacios. Cuando se sigue el enlace, el navegador enviará solicitudes POST con el cuerpo PING a las URLs. Normalmente se usa para seguimiento (tracking).

referrerpolicy

Cuánta información del referrer enviar al seguir el enlace.

• no-referrer: La cabecera Referer no se enviará.
• no-referrer-when-downgrade: La cabecera Referer no se enviará a orígenes sin TLS (HTTPS).
• origin: El referrer enviado se limitará al origen de la página que hace referencia: su esquema, host y puerto.
• origin-when-cross-origin: El referrer enviado a otros orígenes se limitará al esquema, el host y el puerto. La navegación dentro del mismo origen seguirá incluyendo la ruta.
• same-origin: Se enviará un referrer para el mismo origen, pero las solicitudes de origen cruzado no contendrán información de referrer.
• strict-origin: Solo se envía el origen del documento como referrer cuando el nivel de seguridad del protocolo se mantiene igual (HTTPS→HTTPS), pero no se envía a un destino menos seguro (HTTPS→HTTP).
• strict-origin-when-cross-origin (predeterminado): Se envía una URL completa al hacer una solicitud del mismo origen, solo se envía el origen cuando el nivel de seguridad del protocolo se mantiene igual (HTTPS→HTTPS), y no se envía ninguna cabecera a un destino menos seguro (HTTPS→HTTP).
• unsafe-url: El referrer incluirá el origen y la ruta (pero no el fragmento, la contraseña ni el nombre de usuario). Este valor no es seguro, ya que filtra orígenes y rutas desde recursos protegidos por TLS hacia orígenes inseguros.

rel

La relación de la URL enlazada, expresada como tipos de enlace separados por espacios.

target

Dónde mostrar la URL enlazada, especificado mediante el nombre de un contexto de navegación (una pestaña, ventana o <iframe>). Las siguientes palabras clave tienen significados especiales sobre dónde cargar la URL:

• _self: El contexto de navegación actual. (Predeterminado)
• _blank: Normalmente una pestaña nueva, pero los usuarios pueden configurar los navegadores para que abran una ventana nueva en su lugar.
• _parent: El contexto de navegación padre del actual. Si no hay padre, se comporta como _self.
• _top: El contexto de navegación de nivel superior. Concretamente, esto significa el contexto "más alto" que es ancestro del actual. Si no hay ancestros, se comporta como _self.
• _unfencedTop: Permite que los fenced frames incrustados naveguen en el marco de nivel superior (es decir, ir más allá de la raíz del fenced frame, a diferencia de los demás destinos reservados). Ten en cuenta que la navegación seguirá funcionando si esto se usa fuera del contexto de un fenced frame, pero no se comportará como una palabra clave reservada.

Nota: Establecer target="_blank" en elementos <a> proporciona implícitamente el mismo comportamiento que establecer rel="noopener", que no establece window.opener.

type

Indica el formato de la URL enlazada mediante un tipo MIME. No tiene funcionalidad incorporada.

Atributos obsoletos

charset

Indicaba la codificación de caracteres de la URL enlazada.

Nota: Este atributo está obsoleto y no deberían usarlo los autores. En su lugar, usa la cabecera HTTP Content-Type en la URL enlazada.

coords

Se usaba con el atributo shape. Una lista de coordenadas separadas por comas.

name

Era necesario para definir una posible ubicación de destino en una página. En HTML 4.01, id y name podían usarse ambos en <a>, siempre que tuvieran valores idénticos.

Nota: Usa el atributo global id en su lugar.

rev

Especificaba un enlace inverso; lo opuesto a el atributo rel. Quedó obsoleto por resultar muy confuso.

shape

La forma de la región del enlace en un mapa de imagen.

Nota: Usa el elemento <area> para los mapas de imagen en su lugar.

Accesibilidad

Texto de enlace descriptivo

El contenido de un enlace debería indicar hacia dónde conduce, incluso fuera de contexto.

Texto de enlace débil e inaccesible

Un error lamentablemente común es enlazar únicamente las palabras "haz clic aquí" o "aquí":

<p>
  Obtén más información sobre nuestros productos <a href="/products">aquí</a>.
</p>

Resultado

Texto de enlace descriptivo y accesible

Por suerte, esto tiene una solución fácil, ¡y de hecho es más corta que la versión inaccesible!

<p>Obtén más información <a href="/products">sobre nuestros productos</a>.</p>

Resultado

El software de asistencia cuenta con atajos para listar todos los enlaces de una página. Sin embargo, un texto de enlace descriptivo beneficia a todos los usuarios: el atajo de "listar todos los enlaces" emula la forma en que las personas videntes recorren rápidamente las páginas.

Eventos onclick

Los elementos de ancla suelen usarse incorrectamente como botones falsos, estableciendo su href a # o a javascript:void(0) para evitar que la página se recargue, y luego detectando sus eventos click.

Estos valores de href ficticios provocan un comportamiento inesperado al copiar o arrastrar enlaces, al abrirlos en una pestaña o ventana nueva, al guardarlos como marcadores, o cuando JavaScript se está cargando, falla o está deshabilitado. Además, transmiten semántica incorrecta a las tecnologías de asistencia, como los lectores de pantalla.

Usa un <button> en su lugar. En general, solo deberías usar un hipervínculo para navegar a una URL real.

Enlaces externos y enlaces a recursos que no son HTML

Los enlaces que se abren en una pestaña o ventana nueva mediante target="_blank", o los enlaces que apuntan a un archivo de descarga, deben indicar qué ocurrirá al seguir el enlace.

Las personas con baja visión, quienes navegan con la ayuda de tecnología de lectura de pantalla, o quienes tienen dificultades cognitivas, pueden confundirse si se abre inesperadamente una nueva pestaña, ventana o aplicación. Algunos lectores de pantalla antiguos incluso podrían no anunciar este comportamiento.

Enlace que abre una nueva pestaña o ventana

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (se abre en una pestaña nueva)
</a>

Resultado

Enlace a un recurso que no es HTML

Si se utiliza un icono para indicar el comportamiento del enlace, asegúrate de que tenga un atributo alt que describa su propósito. En caso de que falte el icono, el contenido del atributo alt seguirá comunicando el comportamiento del enlace.

<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Se abre en una pestaña nueva)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    Informe anual 2017
    <img src="powerpoint.svg" width="14" alt="(Archivo de PowerPoint)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img
      src="missing-icon.svg"
      width="14"
      alt="(Se abre en una pestaña nueva)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    Informe anual 2017
    <img src="missing-icon.svg" width="14" alt="(Archivo de PowerPoint)" />
  </a>
</p>

Resultado

• WebAIM: Links and Hypertext - Hypertext Links
• MDN / Comprendiendo las WCAG, Pauta 3.2
• G200: Opening new windows and tabs from a link only when necessary
• G201: Giving users advanced warning when opening a new window

Enlaces de salto

Un enlace de salto (skip link) es un enlace situado lo más al principio posible del contenido de <body>, que apunta al inicio del contenido principal de la página. Por lo general, CSS oculta el enlace de salto fuera de la pantalla hasta que recibe el foco.

<body>
  <a href="#content" class="skip-link">Saltar al contenido principal</a>

  <header>…</header>

  <!-- El enlace de salto dirige a este punto -->
  <main id="content"></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: white;
}
.skip-link:focus {
  top: 0;
}

Resultado

Los enlaces de salto permiten a los usuarios que navegan mediante teclado omitir contenido que se repite en varias páginas, como la navegación de la cabecera.

Los enlaces de salto son especialmente útiles para las personas que navegan con ayuda de tecnología de asistencia como switch control, comandos de voz o punteros de cabeza o boca, ya que desplazarse por enlaces repetitivos puede resultar una tarea tediosa.

• WebAIM: "Skip Navigation" Links
• How-to: Use Skip Navigation links
• MDN / Comprendiendo las WCAG, explicaciones de la Pauta 2.4
• Understanding Success Criterion 2.4.1

Tamaño y proximidad

Tamaño

Los elementos interactivos, como los enlaces, deben ofrecer un área lo suficientemente grande para que sea fácil activarlos. Esto ayuda a una gran variedad de personas, incluyendo a quienes tienen problemas de control motor y a quienes usan dispositivos de entrada imprecisos, como una pantalla táctil. Se recomienda un tamaño mínimo de 44×44 píxeles CSS.

Los enlaces de solo texto dentro de un párrafo están exentos de este requisito, pero sigue siendo una buena idea asegurarte de que el texto vinculado tenga la extensión suficiente para facilitar su activación.

• Understanding Success Criterion 2.5.5: Target Size
• Target Size and 2.5.5
• Quick test: Large touch targets

Proximidad

Los elementos interactivos, como los enlaces, situados muy cerca visualmente entre sí deben contar con espacio de separación. El espaciado ayuda a las personas con problemas de control motor, quienes de otro modo podrían activar accidentalmente el contenido interactivo equivocado.

El espaciado puede definirse mediante propiedades CSS como margin.

• Hand tremors and the giant-button-problem

Ejemplos

Enlazar a una URL absoluta

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Resultado

Enlazar a URLs relativas

HTML

<a href="//example.com">URL relativa al esquema</a>
<a href="/es/docs/Web/HTML">URL relativa al origen</a>
<a href="p">URL relativa al directorio</a>
<a href="./p">URL relativa al directorio</a>
<a href="../p">URL relativa al directorio padre</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

Resultado

Enlazar a un elemento en la misma página

<!-- El elemento <a> enlaza a la sección de abajo -->
<p><a href="#Sección_más_abajo">Ir al encabezado de más abajo</a></p>

<!-- Encabezado al que se enlaza -->
<h2 id="Sección_más_abajo">Sección más abajo</h2>

Resultado

Enlazar a una dirección de correo electrónico

Para crear enlaces que se abran en el programa de correo del usuario y le permitan enviar un mensaje nuevo, usa el esquema mailto::

<a href="mailto:nowhere@mozilla.org">Enviar correo a nowhere</a>

Resultado

Para más detalles sobre las URL mailto:, como incluir un asunto o un cuerpo, consulta Enlaces de correo o RFC 6068.

Enlazar a números de teléfono

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Resultado

El comportamiento de los enlaces tel: varía según las capacidades del dispositivo:

• Los dispositivos celulares marcan el número automáticamente.
• La mayoría de los sistemas operativos tienen programas que pueden realizar llamadas, como Skype o FaceTime.
• Los sitios web pueden realizar llamadas telefónicas con registerProtocolHandler, como web.skype.com.
• Otros comportamientos incluyen guardar el número en los contactos, o enviarlo a otro dispositivo.

Consulta RFC 3966 para conocer la sintaxis, características adicionales y otros detalles sobre el esquema de URL tel:.

Usar el atributo download para guardar un <canvas> como PNG

Para guardar el contenido de un elemento <canvas> como una imagen, puedes crear un enlace cuyo href sean los datos del canvas como una URL data: creada con JavaScript, y el atributo download especifique el nombre de archivo para el PNG descargado:

Ejemplo de aplicación de dibujo con enlace de guardado

HTML

<p>
  Pinta manteniendo presionado el botón del mouse y moviéndolo.
  <a href="" download="mi_pintura.png">Descargar mi pintura</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: white;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #6699cc;
  color: white;
  padding: 5px 10px;
}

JavaScript

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

Resultado

Seguridad y privacidad

Los elementos <a> pueden tener consecuencias para la seguridad y la privacidad de los usuarios. Consulta Cabecera Referer: consideraciones de privacidad y seguridad para más información.

Usar target="_blank" sin rel="noreferrer" ni rel="noopener" hace que el sitio web sea vulnerable a ataques de explotación de la API window.opener, aunque cabe destacar que, en las versiones más recientes de los navegadores, establecer target="_blank" proporciona implícitamente la misma protección que establecer rel="noopener". Consulta compatibilidad con navegadores para más detalles.

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

• <link> es similar a <a>, pero se usa para hipervínculos de metadatos que son invisibles para los usuarios.
• :link es una pseudoclase CSS que coincide con elementos <a> cuya URL en el atributo href aún no ha sido visitada por el usuario.
• :visited es una pseudoclase CSS que coincide con elementos <a> cuya URL en el atributo href ya fue visitada por el usuario en el pasado.
• :any-link es una pseudoclase CSS que coincide con elementos <a> que tienen el atributo href.
• Los fragmentos de texto son instrucciones para el agente de usuario, añadidas a las URL, que permiten a los autores de contenido enlazar a un texto específico de una página sin necesidad de ID.