Elemento a en HTML

El elemento html a es una abreviatura de ancla, crea un hipervínculo a otras páginas web, archivos, secciones de la página actual o direcciones de correo electrónico.

El siguiente ejemplo contiene un enlace a un sitio externo:

<a Of the href = "https://bigcode.es/" >
BigCode
</ a >

Etiqueta html a

Clasificaciones de contenido	Elemento organizativo o elemento normal.
Contenido permitido	Contenido regulatorio o regular.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento a excepción de `<a>`otro elemento .
Interfaz DOMO	`HTMLAnchorElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Algunas funciones HTML5 recién agregadas no funcionan en todos los navegadores.

Características

En este elemento se pueden utilizar propiedades globales.

`download`

Esta función le dice al navegador que descargue la URL en lugar de ir a ella, es decir, se le pedirá al usuario que guarde el archivo localmente. Si se establece un valor para esta propiedad, será el nombre predeterminado del archivo que se descargará, pero el usuario puede cambiarlo a voluntad.

No hay restricciones sobre los valores permitidos para esta propiedad, pero los dos caracteres \y serán reemplazados /por guiones bajos ( _ ). Esto se debe a que la mayoría de los sistemas operativos no permiten el uso de ciertos caracteres en los nombres de los archivos, lo que hace que el navegador modifique el nombre del archivo en consecuencia.

Notas:

Esta función es nueva en HTML5 y no existía antes.
La función funciona con enlaces URL de la misma fuente (mismo origen).
Esta función se puede utilizar con blob: URLs y para data: URLs descargar contenido generado a través de JavaScript, como imágenes generadas a través de una aplicación web.
Si el encabezado HTTP con nombre da un Content-Disposition:‎ valor al nombre de archivo que difiere del valor de esta propiedad, entonces el encabezado HTTP tiene prioridad.
Si el valor del encabezado se establece Content-Disposition:‎ en inline prioridad para el encabezado en Firefox y prioridad para una propiedad downloaden Chrome.

Ejemplo de uso de la función para download descargar una imagen en lugar de navegar a ella en el navegador:

< a  href = "logo.png"  descarga > descargar logo </ a >

`href`

Esta propiedad contiene el enlace URL o una parte del enlace URL (es decir, el fragmento de URL) al que apunta el elemento.

El fragmento de una URL es un nombre precedido por un símbolo cuadrado ( #), que ubica el enlace interno dentro del documento actual (a través de la propiedad id de un elemento HTML).

Los tipos de URL no están restringidos a la web (es decir, HTTP), pero se puede utilizar cualquier protocolo compatible con el navegador, como file:‎y ftp:‎y mailto:‎que funcione en la mayoría de los navegadores.

Esta función se puede omitir en HTML5 para crear un enlace ficticio similar al resto de los enlaces, pero hacer clic en él no lleva a ninguna parte.

La propiedad se puede usar href="#top"‎o href="#"‎mover a la parte superior de la página actual, y este comportamiento se define en HTML5 .

El siguiente ejemplo contiene un enlace a un sitio externo:

< a href = "https://bigcode.es/" >
Enlace externo
</ a >

El siguiente ejemplo enlaza con otro elemento de la misma página:

< a  href = "# attr-href" >
Descripción de enlaces a la misma página
</ a >

`hreflang`

Esta propiedad se refiere al lenguaje humano del enlace al que se hace referencia en este elemento, y esta propiedad no tiene función pero se usa para organizar. Los valores permitidos para esta propiedad se definen en BCP47.

`rel`

Esta propiedad determina qué relación tiene el vínculo referenciado con el documento actual y toma cualquier valor o valores válidos para especificar la relación. Consulte la página Tipos de enlaces HTML para obtener detalles sobre los diferentes tipos de enlaces permitidos como valor para esta propiedad.

Un ejemplo del uso de una relación next para referirse al siguiente capítulo de un libro:

< a href = "/chap-50.html" the  rel = "Fair" > próximo capítulo </ a >

`target`

Reservado Indica la ubicación predeterminada para mostrar la salida cuando los enlaces o elementos de formulario hacen que vayan a otra página si no especifican un valor para esta propiedad.

Las siguientes palabras reservadas tienen significados especiales:

‎_self: Muestra el resultado de la ubicación de la página actual. Este es el valor predeterminado si no se especifica ningún otro valor.
:_blank Vea la página en una nueva ventana.
:_parent Page mostrará el lugar de la página padre a la que pertenece el iframe, y si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.
‎_top: el ancho de la página es un lugar en la parte superior de una página en la jerarquía (es decir, la página que es la página principal directa o indirecta de la página actual y no tiene una página principal). Si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.

El siguiente ejemplo permite hacer clic en una imagen para ir a la URL especificada en una nueva pestaña o ventana:

< a  href = "https://bigcode.es/elemento-pre-en-html/"  target = "_blank" > 
  < img  src = "https://bigcode.es/wp-content/uploads/2021/09/Elemento-pre-en-html.webp" 
       alt = "Elemento html pre "  /> 
</ a >

`type`

Esta propiedad especifica el tipo MIME del recurso al que hace referencia el enlace URL. Esta propiedad es organizativa y no tiene ninguna función.

características obsoletas

charset: Esta propiedad define la codificación de caracteres del recurso indicado por la URL, pero esta propiedad está obsoleta en HTML5 y el encabezado HTTP con nombre debe usarse Content-Type con la URL en cuestión.
name: Esta propiedad es necesaria para los elementos <a> que hacen referencia a otro elemento del documento. Esta función está obsoleta en HTML5.
rev: Esta propiedad se utiliza para especificar un vínculo inverso con la relación inverse dependiente de la propiedad rel. Esta característica se ha descuidado porque es difícil de entender y confusa para los desarrolladores.

Notas

Consejos de accesibilidad

A menudo se abusa de los enlaces al agregar el evento onclick para crear botones con valores "#"o una "javascript:void(0)‎"propiedad href para evitar que la página se actualice.

Estos valores provocan un comportamiento inesperado cuando se copian enlaces, se abren en nuevas ventanas o pestañas, se agregan a favoritos, cuando el código JavaScript no está completamente cargado, cuando se producen errores de JavaScript o se rompe. Además, esto no conduce a la creación de elementos debidamente organizados para su uso con algún software (como lectores de pantalla).

El elemento se recomienda <button> en los casos anteriores, y siempre debe usar el elemento <a>para apuntar a una URL válida.

Ejemplos del uso html a

Es una práctica común crear enlaces que abren el cliente de correo electrónico para enviar un nuevo mensaje, colocándolo mailto:‎antes de la dirección de correo electrónico. Para obtener más información sobre la estructura de los enlaces URL para enviar correo electrónico, consulte RFC 6068.

< a Of the  href = " info@bigcode.es" > Envíe un correo electrónico a BigCode </ a >

Proporcionar enlaces a números de teléfono facilitará el proceso de comunicación para los usuarios que ven la página en su teléfono móvil o computadora conectada a un teléfono. Para obtener más información sobre tel cómo vincular pruebas, consulte RFC 2806 y RFC 2396.

< a  href = "tel: +6439*****" > +6438***** </ a >

Si desea permitir que los usuarios descarguen el contenido de un elemento <canvas> como una imagen, puede crear un vínculo con el conjunto de propiedades y download agregar un vínculo a los datos del elemento canvas:

var  link  =  document.createElement ( 'a' ); 
link.textContent  =  'Descargar imagen' ;

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

document.body.appendChild ( link );

Formato predeterminado

La mayoría de los navegadores muestran el elemento <a> subrayando estableciendo la propiedad text-decoration en underline y cambiando el cursor y el color del texto, pero el valor utilizado depende del navegador y del sistema operativo.