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:
Etiqueta html a
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: URLsy paradata: URLsdescargar 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:eninlineprioridad para el encabezado en Firefox y prioridad para una propiedaddownloaden 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
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 = "http://bigcode.es/" > Enlace externo
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
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
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.- :
_blankVea la página en una nueva ventana. - :
_parentPage 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_selfmisma. _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_selfmisma.
El siguiente ejemplo permite hacer clic en una imagen para ir a la URL especificada en una nueva pestaña o ventana:
< a href = "http://bigcode.es/elemento-pre-en-html/" target = "_blank" >
< img src = "http://bigcode.es/wp-content/uploads/2021/09/Elemento-pre-en-html.webp"
alt = "Elemento html pre " />
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 usarseContent-Typecon la URL en cuestión.name: Esta propiedad es necesaria para los elementosque 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óninversedependiente de la propiedadrel. 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 en los casos anteriores, y siempre debe usar el elemento 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 = " [email protected]" > Envíe un correo electrónico a BigCode
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*****
Si desea permitir que los usuarios descarguen el contenido de un elemento 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 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.
- Introducción al Lenguaje de Programación HTML
- Elemento HTML
- Elemento base en HTML
- Elemento head en HTML
- Elemento link en HTML
- Elemento meta en HTML
- Elemento style en HTML
- Elemento title en HTML
- Elemento body en HTML
- Elemento address en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento footer en HTML
- Elementos h1 al h6 en HTML
- Elemento header en HTML
- Elemento section en HTML
- Elemento blockquote en HTML
- Elemento nav en HTML
- Elemento dd en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento hr en HTML
- Elemento li en HTML
- Elemento main en HTML
- Resumen General de Listas en HTML
- Elemento ol en HTML
- Elemento p en HTML
- Descripción de las Etiquetas HTML
- Qué son los Atributos HTML
- Elemento ul en HTML
- Elemento a en HTML
- Elemento pre en HTML
- El Texto en HTML
- Elemento abbr en HTML
- Elemento b en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento br en HTML
- Elemento cite en HTML
