<a>

El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.

Categorías de contenido Contenido de flujo, contenido de párrafo, contenido interactivo, contenido palpable
Contenido permitido Transparente, que contiene contenido de flujo (excluyendo contenido interactivo) o contenido de párrafo.
Omisión de etiquetas None, both the starting and ending tag are mandatory.
Elementos principales permitidos Cualquier elemento que acepte contenido de párrafo o cualquier elemento que acepte contenido de flujo, sin embargo simpre excluyendo los elementos <a> (de acuerdo con el principio lógico de simetría, si una etiqueta <a> como padre, no puede contener contenido interactivo, entonces el mismo contenido de <a> no puede tener una etiqueta <a> como su padre).
Roles ARIA permitidos button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem
Interfaz DOM HTMLAnchorElement

Atributos

Este elemento incluye los atributos globales.

download HTML5
Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local.  Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (underscores), lo que evitará sugerencias de ruta específicas.  Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia.
Notas:
  • Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs).
  • Este atributo puede ser utilizado con blob: URLs y data: URLs para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.
  • Si el encabezado (header) HTTP Content-Disposition: proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.
  • Si Content-Disposition: está ajustado a inline, Firefox prioriza Content-Disposition, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo download.
href
Contiene una URL o un fragmento de URL al cual apunta el enlace.
Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (#), el cual especifíca una ubicación interna objetivo (un ID de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, file:, ftp:, and mailto: funcionan en la mayoría de los navegadores.
Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar.

Nota: Puede ser utilizado href="#top" o un fragmento vacío href="#" para enlazar a la parte superior de la página actual. Este comportamiento está especficado en HTML5.

hreflang
Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por BCP47.
referrerpolicy
Indica que referencia (referer) enviar cuado la URL es recuperada:
  • 'no-referrer' significa Referer: el encabezado no será enviado.
  • 'no-referrer-when-downgrade' significa sin Referer: el encabezado será enviado cuando se navega a un origen (origin) sin HTTPS. Este es un comportamiento por defecto.
  • 'origin' significa que el "referrer" estará en el origen (origin) de la página, no incluye la información posterior al dominio.
  • 'origin-when-cross-origin' significa que la navegación a otros orígenes (origins) será limitada al esquema (scheme), el host y el puerto, mientras que la navegación en el mismo origen (origin) incuirá la trayectoria de referencia (referrer's path).
  • 'unsafe-url' significa que la referencia (referrer) incuirá el origen(origin) y la trayectoria (path), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.
rel
Especifica la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace tipos de enlace (link types).
target
Especifica en donde desplegar la URL enlazada. Es un nombre (name of), o palabra clave (keyword for), un contexto de navegación (browsing context): una pestaña, ventana, o <iframe>. Las siguientes palabras clave (keywords) tienen significado especial:
  • _self: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.
  • _blank: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.
  • _parent: Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.
  • _top: Carga la URL en le contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo modo que _self.

Nota: Cuando se utiliza target, considera agregar rel="noopener noreferrer" para evitar el uso de la API window.opener.

type
Especifica el tipo de medio (media type) en la forma de MIME type para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.

Obsoleto

charset Obsoleto HTML5
Este atributo define la codificación de caracteres (character encoding) de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en RFC 2045. El valor por defecto es ISO-8859-1.

Nota de uso: Este atributo es obsoleto en HTML5 y no debe ser utilizado por autores. Para lograr su efecto, se debe utilzar el encabezado HTTP Content-Type: en la URL enlazada.

coords HTML 4 only, Obsoleto HTML5
Para utilizar con el siguiente atributo shape, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.
name HTML 4 only, Obsoleto HTML5
Este atributo era requerido para anclas (anchors) que definían una posible ubicación dentro de la página. En HTML 4.01, id y name podían ser utilizados simultáneamente en un elemento <a> simpre y cuando tuvieran valores idénticos.

Nota de uso: Este atributo es obsoleto en HTML5, se utiliza el atributo global id en su lugar.

rev HTML 4 only, Obsoleto HTML5
Este atributo especifica un enlace inverso, la relación inversa del atributo rel. Fue desechado por ser muy confuso.
shape HTML 4 only, Obsoleto HTML5
Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es circle, default, polygon, y rect. El formato del atributo coords depende del valor de la forma geométrica. Para circle, el valor es x,y,r donde x y y son las coordenadas en pixel para el centro del círculo y  r es el valor del radio en pixeles. Para rect, el atributo coords debe ser x,y,w,h. Los valores x y y definen la esquina superior izquierda del rectángulo, mientras que w y h definen el ancho y el alto respectivamente. Un valor del polygon para shape requiere los valores x1,y1,x2,y2,...para coords. Cada uno de los pares x,y definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor default para shape Requiere que el área encerrada, típicamente una imágen, sea utilizada.
Nota: Utilice el atributo usemap para el elemento <img> y el elemento asociado <map> para definir puntos de acceso (hotspots) en lugar del atributo shape.

Ejemplos

Enlazando a una ubicación externa

<!-- anclaje a un archivo externo -->
<a href="https://www.mozilla.com/">
Enlace externo
</a>

Resultado

Enlace externo

Enlazando a otra sección de la misma página

<!-- enlace a un elemento en esta página con id="attr-href" -->
<a href="#attr-href">
Descripción de enlaces de la misma página
</a>

Resultado

Descripción de enlaces de la misma página

Creando una imagen clicable

Este ejemplo utiliza una imagen que enlaza a la página de inicio de MDN. La página de inicio se abrirá en un contexto de navegación nuevo, esto es, en una nueva página o nueva ventana.

<a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>

Resulta

Creando un enlace de correo

Es común crear enlaces que abren el programa de correo del usuario para permitir enviar un nuevo mensaje. Esto se hace con un enlace mailto:. Aquí tenemos un ejemplo:

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

Resultado

Envia un correo a: nowhere

Para detalles adicionales acerca del esquema de la URL mailto, tales como incluir el asunto, el cuerpo u otros contenidos predeterminados, consultar Enlaces de correo (Email links) o RFC 6068.

Creando un enlace a un número de teléfono

Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles)

<a href="tel:+491570156">+49 157 0156</a>

Para detalles adicionales acerca del esquema de la URL tel, consultar RFC 2806 y RFC 2396.

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

Si deseas permitir a los usurios descargar una elemento HTML <canvas> como una imagen, puedes crear un enlace con una atributo download y la información canvas como un archivo URL:

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

Puedes ver como funciona en: jsfiddle.net/codepo8/V6ufG/2/.

Notas

HTML 3.2 define sólo los atributos name, href, rel, rev, y title.

Recomendaciones de accesibilidad

Se abusa frecuntemente de las etiquetas de ancla (anchor tags) con el uso de los eventos onclick para crear pseudo-botones ajustando href a "#" o "javascript:void(0)" para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (bookmarking), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (semantics) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un <button> en su lugar. En general, sólo se debe utilizar una ancla (anchor) para navegación utilizando una URL adecuada.

Cliceo y enfoque

Cuando se clicea sobre un <a> las consecuencias varían de acuerdo al navegador y el sistema operativo.

¿Al hacer clic en un <a> se enfoca?
Navegadores de escritorio Windows 8.1 OS X 10.9
Firefox 30.0 Si Si
Chrome ≥39
(Chromium bug 388666)
Si Si
Safari 7.0.5 N/A Sólo cuando tiene un tabindex
Internet Explorer 11 Si N/A
Presto (Opera 12) Si Si
¿Al hacer un clic en un <a> se enfoca?
Navegadores móviles iOS 7.1.2 Android 4.4.4
Safari Mobile Sólo cuando tiene un tabindex N/A
Chrome 35 ??? Sólo cuando tiene un tabindex

Especificaciones

Especificación Estatus Comentario
Referrer Policy
La definición de 'referrer attribute' en esta especificación.
Candidate Recommendation Added the referrerpolicy attribute.
HTML Living Standard
La definición de '<a>' en esta especificación.
Living Standard
HTML5
La definición de '<a>' en esta especificación.
Recommendation
HTML 4.01 Specification
La definición de '<a>' en esta especificación.
Recommendation

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
aChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
charset
Deprecado
Chrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
coords
Deprecado
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte ? — 58
Notas
Sin soporte ? — 58
Notas
Notas You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Sin soporte ? — 58
Notas
Sin soporte ? — 58
Notas
Notas You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
downloadChrome Soporte completo 14
Notas
Soporte completo 14
Notas
Notas Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Edge Soporte completo 18
Soporte completo 18
Soporte parcial 13
Notas
Notas Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
Notas Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).
Firefox Soporte completo 20IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 10.1WebView Android Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Starting in WebView 65, cross-origin downloads are not supported on the <a> element.
Chrome Android Soporte completo 18
Notas
Soporte completo 18
Notas
Notas Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Firefox Android Soporte completo 20Opera Android ? Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 1.0
Notas
Soporte completo 1.0
Notas
Notas Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> element.
hrefChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
hreflangChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
target="_blank" implies rel="noopener" behavior
Deprecado
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 79IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 12.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 79Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Sin soporte No
name
Deprecado
Chrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
ping
Experimental
Chrome Soporte completo SiEdge Soporte completo 79Firefox Soporte completo Si
Deshabilitado
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo SiSafari Sin soporte NoWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo Si
Deshabilitado
Soporte completo Si
Deshabilitado
Deshabilitado This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Sin soporte NoSamsung Internet Android Soporte completo Si
referrerpolicyChrome Soporte completo 51Edge Soporte completo 79Firefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 11.1WebView Android Soporte completo 51Chrome Android Soporte completo 51Firefox Android Soporte completo 50Opera Android Soporte completo 41Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 7.2
relChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
rev
Deprecado
Chrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
shape
Deprecado
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte ? — 58
Notas
Sin soporte ? — 58
Notas
Notas You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Sin soporte ? — 58
Notas
Sin soporte ? — 58
Notas
Notas You can no longer nest an <a> element inside a <map> element to create a hotspot region - coords and shape attribute support removed.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
targetChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
typeChrome Soporte completo SiEdge Soporte completo 12Firefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Deprecado. No debe ser usado en nuevos sitios web.
Deprecado. No debe ser usado en nuevos sitios web.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Consultar también