Atributos de la etiqueta de enlace <a>

¿Cuántos atributos tiene la etiqueta de enlace <a>?
La etiqueta <a> es utilizada para crear enlaces (externos e internos) en HTML y tiene varios atributos que pueden ser utilizados para personalizar su comportamiento. Exactamente, la etiqueta de enlace tiene 9 atributos que son:
-
href: es el atributo más importante e imprescindible de la etiqueta <a>. Indica la URL a la que el enlace debe dirigir al usuario, ya sea un enlace externo o interno. Este atributo es obligatorio.
- target: este atributo especifica dónde se debe abrir la página de destino del enlace. Los valores pueden ser:
- _self: el enlace se abre en el mismo contenedor donde está la etiqueta <a>, que normalmente es la misma pestaña donde está el enlace
- _blank: el enlace se abre en una pestaña nueva, conservando la página web donde el usuario estaba para que no la pierda
- _parent: el enlace se abre en el frame contenedor/padre del elemento donde está la etiqueta <a>, pero si no hay un contenedor, es decir, la ventana misma es el contenedor, se abre en toda la ventana como un enlace _self
- _top: es parecido a _parent. El enlace se abre en el frame superior al elemento contenedor/padre del elemento donde está la etiqueta <a> pero, si no hay contenedor, se abre en toda la ventana como un enlace _self
- nombre del frame: cuando el frame tiene el atributo "name", escribiendo el nombre del frame donde quieres que se abra el enlace, se abre en el frame indicado
- download: este atributo indica al navegador que el enlace debe ser descargado en lugar de ir allí. Se puede especificar el nombre del archivo a descargar.
- rel: este atributo define la relación entre la página actual y la página de destino del enlace. Los valores comunes son:
- nofollow: indica a los motores de búsqueda que no sigan este enlace para que no lo rastree ni lo asocie con tu página web
- noopener: es un atributo que se agrega a los enlaces para proteger la seguridad y privacidad del usuario. Es especialmente útil cuando se abren enlaces en nuevas pestañas o ventanas porque asegura que la nueva ventana abierta no tenga acceso a la ventana origen, evitando que la nueva ventana pueda ser utilizada maliciosamente para robar información, hacer phising u otros ataques a la seguridad
- noreferrer: este atributo se utiliza en enlaces y en formularios. Indica que el enlace no debe enviar el "Referer HTTP header" a la página de destino cuando el usuario haga clic en el enlace o envíe el formulario para que la web de destino no sepa desde qué página se hizo click en el enlace o se envió el formulario para proteger la privacidad del usuario, ya que algunos sitios web podrían utilizar la información del Referer para recopilar datos personales o rastrear el comportamiento del usuario. Sin embargo, algunos sitios legales pueden requerir el Referer HTTP header para fines de seguridad o análisis, por lo que se recomienda usar
rel="noreferrer"
solo cuando sea absolutamente necesario y apropiado. - type: este atributo se utiliza para especificar el tipo de contenido del archivo al que el enlace apunta.
- hreflang: este atributo se utiliza para especificar el idioma de la URL al que se dirige el enlace.
- media: este atributo se utiliza para especificar el tipo de medio para el archivo al que el enlace apunta.
- title: este atributo proporciona información adicional sobre el enlace en forma de texto emergente al colocar el puntero del ratón encima del enlace y ayuda a la experiencia de usuario de personas con visibilidad reducida ya que los lectores de voz les pueden leer el título del enlace para saber lo que hace el enlace. Este atributo es importante para el SEO porque añade código descriptivo y aumenta la experiencia de usuario.
- class: Este atributo se utiliza para asignar una o varias clases CSS al enlace, lo que permite aplicar estilos personalizados a través de CSS y/o manejarlos con JavaScript
- id: igual que el atributo class pero para referirse a un único enlace de la página web
Es importante destacar que el uso adecuado de los atributos de la etiqueta <a>
puede mejorar la experiencia del usuario y ayudar a mejorar el SEO de una página web. Por ejemplo, el uso de rel="nofollow"
puede ayudar a prevenir el spam en los comentarios de los blogs, mientras que el uso de title
puede proporcionar información adicional y ayudar a mejorar la accesibilidad para los usuarios con discapacidades visuales.
Tabla de los atributos de la etiqueta <a>
Atributo | Uso |
---|---|
href | Indica la URL a la que va el enlace |
target | Indica el frame o pestaña donde se abre el enlace:
|
download | Descarga un archivo en vez de ir allí |
rel | Indica la relación entre la página actual y la página de destino:
|
type | Especifica el tipo de archivo del enlace |
hreflang | Indica el idioma del enlace |
media | Indica el tipo de archivo del enlace |
title | Proporciona información adicional sobre el enlace |
class | Asigna una clase al enlace |
id | Asigna un identificador único al enlace |