Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Combinado con una red de datos y un protocolo de acceso, un hipervínculo permite acceder al recurso referenciado en diferentes formas, como visitarlo con un agente de navegación, mostrarlo como parte del documento referenciador o guardarlo localmente.
Los hipervínculos son parte fundamental de la arquitectura de la World Wide Web, pero el concepto no se limita al HTML o a la Web. Casi cualquier medio electrónico puede emplear alguna forma de hiperenlace.
Presentación habitual de un enlace
En la industria de la búsqueda (es decir, en términos SEO) suelen denominarse backlinks los enlaces de otros dominios distintos al nuestro que nos apuntan.
Visualmente o en iconografía e interfases de usuario, suelen representarse como dos eslabones de una cadena. A partir de este concepto, el diseño gráfico y la creatividad hacen el resto:
El elemento HTML <A> se utiliza para crear hipervínculos o enlaces en un documento HTML.
Los hipervínculos pueden ser utilizados para enlazar a otros documentos HTML, imágenes, archivos, etc.
Atributos y relaciones del enlace
Los atributos y relaciones que pueden añadirse al elemento son los siguientes:
- Atributo href: Este es el atributo más importante del elemento
<a>. Se utiliza para especificar la URL del recurso al que se quiere enlazar. La URL puede ser absoluta (incluyendo el protocolo y el nombre de dominio) o relativa (relativa a la ubicación actual del documento).
Ejemplo: <a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>
- Atributo target: Se utiliza para especificar dónde se abrirá el recurso enlazado.
Los valores posibles son:
_blank: Abre el recurso en una nueva pestaña o ventana del navegador.
_self: Abre el recurso en la misma pestaña o ventana del navegador (este es el valor por defecto).
_parent: Abre el recurso en el marco padre.
_top: Abre el recurso en la ventana completa del navegador, eliminando todos los marcos.
Ejemplo: <a href="https://www.ejemplo.com" target="\_blank">Enlace a Ejemplo.com en nueva pestaña</a>
- Atributo title: Se utiliza para proporcionar información adicional sobre el recurso enlazado. El valor del atributo se mostrará como una descripción emergente cuando el usuario pase el puntero del ratón sobre el enlace.
Ejemplo: <a href="https://www.ejemplo.com" title="Página principal de Ejemplo.com">Enlace a Ejemplo.com</a>
- Atributo download: Se utiliza para indicar que el recurso enlazado debe ser descargado en lugar de ser abierto en el navegador. El valor del atributo se utilizará como el nombre predeterminado del archivo descargado.
Ejemplo: <a href="https://www.ejemplo.com/archivo.pdf" download>Descargar archivo PDF</a>
- Atributo rel: Se utiliza para especificar la relación entre el documento actual y el recurso enlazado. Los valores posibles son:
alternate: El recurso enlazado es una alternativa al documento actual.
author: El recurso enlazado proporciona información sobre el autor del documento actual.
bookmark: El recurso enlazado es un marcador permanente para el documento actual.
external: El recurso enlazado es un recurso externo al sitio web actual.
help: El recurso enlazado proporciona ayuda para el documento actual.
license: El recurso enlazado proporciona información sobre la licencia del documento actual.
next: El recurso enlazado es la siguiente página en una secuencia.
prev: El recurso enlazado es la página anterior en una secuencia.
search: El recurso enlazado proporciona un motor de búsqueda para el documento actual.
tag: El recurso enlazado está asociado con una etiqueta o palabra clave para el documento actual.
Ejemplo: <a href="https://www.ejemplo.com/licencia.html" rel="license">Licencia de Ejemplo.com</a>
- Atributo aria-label: Se utiliza para proporcionar una etiqueta accesible para el enlace. El valor del atributo se leerá en voz alta por los lectores de pantalla y se mostrará como una descripción emergente cuando el usuario pase el puntero del ratón sobre el enlace.
Ejemplo: <a href="https://www.ejemplo.com" aria-label="Enlace a la página principal de Ejemplo.com">Ejemplo.com</a>
