Los atributos de enlaces HTML son un tema de aprendizaje obligatorio para todo desarrollador web nuevo o avanzado. Las actualizaciones de HTML incluyen nuevos atributos y otros van quedando obsoletos, por lo que estar en constante aprendizaje nos permite manejar a la perfección los enlaces.
En este artículo, veremos los atributos de enlaces HTML vigentes hasta la fecha y te explicaremos cómo usarlos adecuadamente.
Enlaces HTML
Los enlaces HTML se basan en el elemento <a>, el cual proviene de la palabra Anchor o Ancla. Su estructura más sencilla es con el atributo href, que nos indica la ruta en donde se encuentra nuestro recurso.
Como te explicamos en el artículo sobre enlaces en HTML, existen varios tipos de enlaces según su funcionalidad y ahora es el momento de revisar los atributos que podemos usar con la etiqueta <a>.
Desde su creación, HTML ha visto la introducción y eliminación de varios atributos para mejorar la funcionalidad y seguridad de los enlaces. Estar al tanto de estos cambios es crucial para cualquier desarrollador.
Atributos de enlaces HTML
Para empezar, el elemento <a>, dentro de las etiquetas HTML, permite el uso de atributos de enlaces HTML globales y propios. Vamos a revisar cuales son y cómo usar estos atributos de enlaces HTML:
href
Atributo principal del elemento <a>. Indica la dirección del recurso y puede usarse en rutas absolutas o relativas.
//atributos de enlaces HTML<a href="https:\\keepcoding.io">Lo mejores Bootcamps Full Stack en Keepcoding</a>
En algunos casos no se utiliza el atributo href en la etiqueta <a>. Cuando se hace así, el enlace se vuelve marcador de posición. Estos casos son comunes en los menús de navegación, en los cuales los enlaces a la página activa se omiten.
También es posible poner como valor en href un nombre o identidad en vez de un enlace. Esto sucede cuando se quiere ir a una ubicación interna dentro del documento HTML que trabajamos.
//atributos de enlaces HTML
<a href="cursos.html">Lo mejores cursos en Keepcoding</a>Aquí, “cursos.html” es un ID que se ha asignado previamente a un párrafo, un encabezado, una imagen o algún elemento del documento HTML.
Download
Atributo de tipo booleano que le indica al navegador si debe abrir el enlace o si, por el contrario, debe descargar un archivo en la máquina del usuario. Adicional a esto, el desarrollador web puede escoger el nombre con el que se guarda el archivo o dejarlo por defecto.
Descárgate la imagen de portada de Keepcoding//atributos de enlaces HTML<a download href="https://keepcoding.io/wp-content/uploads/2021/12/Home-cabecera-min-1.jpg">Descárgate la imagen de portada de Keepcoding</a>
Si se quiere especificar un nombre para descargar el archivo, se debe escribir el valor así: download=”nombre de archivo”
hreflang
Este atributo de lenguaje le indica al navegador en qué idioma debe mostrar el recurso. Cabe resaltar que este atributo es solo informativo.
//atributos de enlaces HTML<a hreflang="en" href="version-ingles.html">Versión en inglés de Keepcoding</a>
rel
Es un atributo que describe la relación entre el recurso enlazado con el documento o ruta de destino. Se usan diferentes tipos de enlaces en forma de lista no ordenada y espaciada.
Los siguientes son los valores que permite el atributo:
- alternate: hipervínculo que entrega una representación alternativa del recurso actual.
- author: enlace a una página que detalla el autor de la web o una forma de contactarlo.
- bookmark: indica que la página enlazada es un enlace permanente. Se usa generalmente para marcar el artículo o sección más cercano de la página.
- external: indica que el enlace se abrirá fuera de la página actual.
- help: enlace que lleva a una página con ayuda contextual de un elemento de la página o de la página completa.
- license: hipervínculo que lleva a un documento que describe la licencia copyright de la página web.
- next: enlace que lleva al siguiente recurso de una secuencia de documentos.
- nofollow: indica que el autor de la página actual no tiene relación, no respalda o no tiene control sobre el recurso enlazado.
- noopener: se usa para los enlaces que se abren en una pestaña nueva. Se creó como mecanismo de defensa para evitar que las nuevas pestañas obtengan información y control sobre la página original.
- noreferrer: se usa en conjunto con el atributo noopener. Le indica al navegador que no debe compartir la información de la web que enlaza el documento de destino.
- opener: al contrario de noopener, le indica al navegador que envíe la información de la página que enlaza el documento destino.
- prev: enlace que lleva al anterior recurso de una secuencia de documentos.
- search: hipervínculo que lleva a una página diseñada para realizar búsquedas sobre la página actual y sus recursos.
- tag: indica que el enlace se refiere a un documento que describe una etiqueta que se aplica al documento actual.
El siguiente ejemplo de código lo hemos extraído una página web. Como ves, usa dos de los atributos de enlaces HTML: rel y target. Además, usa tres valores del atributo rel: noopener, noreferrer y nofollow.
//atributos de enlaces HTML<a rel="noreferrer noopener nofollow" href="https://algunapaginaweb.com/sobre-nosotros/codigo-de-honor/" target="_blank">Código de honor</a>
target
El atributo target se usa para indicar dónde se debe abrir el recurso. Este atributo tiene los siguientes valores:
- _blank: el recurso se abre en una ventana o pestaña nueva. Depende de la configuración del navegador interpuesta por el usuario.
- _parent: abre el enlace en el contexto de navegación parent.
- _self: el recurso enlazado se abre en la misma pestaña de la página actual. Es decir, abandona la página original.
- _top: abre el enlace en el contexto de navegación más alto. Si no hay parent, este valor se comporta como _self.
type
Este atributo es únicamente informativo y nos indica el tipo de medio del recurso.
//atributos de enlaces HTML<a href="imagen de portada.png" type="image/png">Imagen de portada</a>
Los atributos de enlaces HTML son numerosos, complejos y muchos deben usarse en conjunto. Es necesario identificarlos y aprender a usar cada uno de ellos, puesto que esto repercute en la vulnerabilidad, la facilidad de navegación, el SEO y la funcionalidad de una página web. Sin duda, es un tema amplio pero fascinante que nos impulsa a seguir aprendiendo y, por eso, te recomendamos el Bootcamp Desarrollador Web Full Stack, donde las etiquetas y atributos se explican detalladamente. ¡Apúntate!
