Los enlaces HTML permiten la navegación entre páginas de Internet mediante un simple clic. Además, también permiten acceder a archivos, descargar documentos o desplazarse a otras ubicaciones dentro de la misma página web. Los enlaces constituyen un elemento esencial de la web tal desde que se creó.
El enlace HTML también es conocido como hiperenlace, hipervínculo o link.
Para crear enlaces se utiliza el elemento <a>. Se trata de un elemento de línea que puede ser introducido dentro de cualquier elemento que acepte contenido de párrafos. Este elemento tiene dos etiquetas: la etiqueta <a> de apertura y la etiqueta </a> de cierre. Todo contenido que esté entre estas dos etiquetas será un enlace. Además, es importante señalar que los enlaces no se pueden anidar.
Ejemplo de código HTML con un enlace:
<p>Párrafo con un <a href='#'>enlace</a>.</p>
Este es el resultado:
Párrafo con un enlace.
El atributo ‘href’
El atributo href es el más importante de los enlaces, ya que se utiliza para definir el destino al que apunta el enlace. En su valor podemos introducir la URL de una página web, la URL de un archivo, una dirección de correo electrónico o un número de teléfono; estos dos últimos deben ir con un formato adecuado.
En el ejemplo anterior usamos el símbolo de la almohadilla (#) como valor. Cuando se utiliza este símbolo, el enlace adquiere la funcionalidad de navegar hacia la parte superior del mismo documento HTML en el que estamos.
Ejemplo de enlace con una dirección web:
<a href='https://recursivos.com/'>Recursivos</a>
Ejemplo de enlace con una dirección de correo electrónico:
<a href='mailto:correo@example.com'>Correo</a>
Ejemplo de enlace con un número de teléfono:
<a href='tel:+123456789'>Teléfono</a>
Ejemplo de enlace a una sección de la página web:
<a href='#mi-enlace'>Enlace</a>
...
<h3 id='mi-enlace'>Sección de destino</h3>
En este caso anterior, se añade un atributo id al elemento de destino, cuyo valor será un texto o un número entero. Si es texto, se recomienda usar el guión (-) como separador de términos. En el atributo href se añade la almohadilla seguida del valor del id de destino, deben coincidir.
Ejemplo de enlace con un documento local:
<a href='file:///home/usuario/archivo.txt'
Usando el protocolo file:// indicamos una ruta absoluta en nuestro ordenador. La ruta del archivo es /home/usuario/archivo.txt. Cabe señalar que este protocolo se usa únicamente para apuntar a recursos locales, no para recursos que estén disponibles a través de Internet.
El atributo ‘target’
El atributo target permite especificar la forma de acceder a un enlace. Gracias a este atributo podemos indicarle a un enlace que se abra a otra pestaña del navegador en vez de abrirse a la misma. Por defecto, todos los enlaces se abren en la misma ventana y pestaña del navegador; el valor por defecto es _self.
Lista de valores del atributo target:
| Valor | Descripción |
|---|---|
_self | Abre el enlace en el contexto de navegación actual, es decir, en la misma ventana y pestaña. Es el valor por defecto de los enlaces. |
_blank | Abre el enlace en un nuevo contexto de navegación. Normalmente se trata de una pestaña nueva. Sin embargo, los usuarios pueden configurar el navegador para que en vez de ser una nueva pestaña sea una nueva ventana. |
_parent | Abre el enlace en el contexto de navegación padre (parent). En caso de que no exista, se abrirá usando el valor por defecto _self. |
_top | Abre el enlace en el contexto más alto de navegación (ancestro del actual). Igual que el anterior, en caso de que no exista el contexto padre (parent), se abrirá con el valor por defecto _self. |
El atributo ‘title’
El atributo title permite indicar un nombre o un título sobre el destino al que apunta el enlace. Este título sólo es visible si el usuario pone el puntero del ratón encima del enlace. El valor del atributo title aparece como un texto de ayuda.
<p><a href='#' title='Ir arriba'>Enlace</a></p>
El código de ejemplo anterior dará el siguiente resultado:
El atributo ‘rel’
El atributo rel permite especificar la relación del sitio web actual con el destino al que apunta el enlace. Este atributo puede tener varios valores diferentes.
Lista de valores del atributo rel:
| Valor | Descripción |
|---|---|
archives | Permite indicar que la página enlazada contiene una lista con un enlace hacia la página actual. Normalmente se trata de índices anuales o mensuales de artículos relacionados. |
author | Se usa para definir un enlace hacia una página que describe el autor del artículo actual. En ocasiones, la página enlazada contiene el índice de todos los artículos del mismo autor. |
bookmark | Indica que el enlace es un «enlace permanente» (permalink) al ancestro más cercano del elemento <article> o para la sección con la que el elemento está más vinculado. |
external | Indica que el enlace apunta a un recurso externo al sitio en el que se encuentra la página actual. Es decir, que seguir el enlace hará que el usuario abandone el sitio web en cuestión. |
first | Con este valor se indica que el enlace conduce al primer recurso de la serie de recursos en la que se encuentra la página actual. Se usa junto con last, prev y next. |
help | Este valor permite indicar que el enlace apunta a una página que contiene información de ayuda. |
index | Indica que la página es parte de una estructura jerárquica y que el enlace conduce al recurso de un nivel superior de esa estructura. |
last | Con este valor se indica que el enlace conduce al último recurso de la serie de recursos en la que se encuentra la página actual. Se usa junto con first, prev y next. |
license | Indica que el enlace apunta a un documento que describe información sobre la licencia. |
next | Indica que el enlace conduce al siguiente recurso de la serie de artículos en la que se encuentra la página actual. Se usa junto con first, last y prev. |
nofollow | Se usa para indicar a los motores de búsqueda que el enlace no cuenta con el aval del autor del sitio web. Los motores de búsqueda lo tienen en cuenta en sus algoritmos de clasificación de popularidad. |
noopener | Evita que la página enlazada pueda acceder a la propiedad window.opener. Con eso se garantiza la ejecución de un proceso separado. Es importante por motivos de seguridad, y se usa junto con el atributo target='_blank'. |
noreferrer | Especifica al navegador web que no debe pasar un encabezado de referencia HTTP si un usuario hace clic en el enlace. El objetivo de esto es el de evitar transmitir información de referencia, como sería el nombre del navegador web, el del sistema operativo, la región, etc. También se usa por motivos de seguridad y va acompañado del atributo target='_blank'. |
prev | Indica que el enlace conduce al recurso anterior de la serie de artículos en la que se encuentra la página actual. Se usa junto con first, last y next. |
search | Indica que el enlace apunta a un documento cuya interfaz está diseñada para buscar palabras en un documento HTML o en un sitio web completo. |
sidebar | Indica que el enlace conduce a un recurso que sería más adecuado para un contexto de navegación secundario, como una barra lateral. |
tag | Indica que el enlace hace referencia a un documento que describe una etiqueta aplicada en la página actual. |
up | Indica que la página es parte de una estructura jerárquica y que el enlace apunta al recurso de nivel superior de esta estructura. |
El atributo ‘download’
El atributo download permite indicar si el recurso enlazado debe ser descargado a la máquina del usuario (ordenador, móvil…) o abrirse en el navegador. Este atributo se puede especificar sin valor —de forma binaria—, es decir, que su presencia hará que se descargue el archivo deseado; pero también se puede indicar el nombre con el que se guardará el archivo. Por ejemplo: download='archivo.txt'.
Enlaces externos e internos
Los enlaces se pueden clasificar en externos e internos. Los enlaces externos son aquellos que apuntan a otro sitio web, es decir, a un sitio que tiene otro dominio. En cambio, los enlaces internos son los que apuntan a otras secciones de un mismo sitio web o dominio, ya sean otros artículos, categorías o incluso subdominios.
Es habitual que en los enlaces externos se use el atributo target='_blank' seguido de los atributos rel='noopener noreferrer'. Además, si no se confía plenamente en el sitio enlazado se puede usar el atributo rel='nofollow'.
Por su parte, es común que los enlaces internos se carguen en el mismo contexto de navegación actual (atributo target por defecto) y que su URL sea relativa. Vamos a ver las diferencias entre enlaces absolutos y relativos.
Enlaces absolutos y relativos
Los enlaces también se pueden clasificar según si la URL a la que apuntan tiene un formato de URL absoluta o de URL relativa.
Un enlace absoluto es el que contiene una URL absoluta, es decir, que el valor del atributo href contiene todas las partes de una URL: protocolo, servidor y ruta. Con la información de una URL absoluta no se necesita más información para obtener el recurso que se haya enlazado.
Ejemplo de enlace absoluto:
<a href='https://recursivos.com/html/'>Aprender HTML</a>
En este ejemplo se puede ver como el valor del atributo href contiene un protocolo («https://»), un servidor («recursivos.com») y una ruta («/html/»). Este tipo de enlaces se pueden usar tanto para apuntar a recursos externos como para enlazar recursos internos. Al tener toda la información disponible, siempre va a funcionar.
Un enlace relativo es el que apunta a una URL relativa, es decir, que prescinde de algunas partes para hacerla más breve. Estos enlaces son necesariamente internos y se usan por una cuestión práctica y de mantenimiento. Es más fácil escribir parte de una ruta que una ruta completa. En este tipo de enlaces se prescinde del protocolo y el dominio. Los navegadores web deducen la parte que falta.
Ejemplo de enlace relativo:
<a href='/html/'>Aprender HTML</a>
En este ejemplo, el enlace apunta a la misma ruta que el ejemplo anterior que tiene una URL absoluta. Los navegadores web deducen la parte que falta a partir de la lectura del protocolo y dominio actual. Por esa razón funcionan únicamente como enlaces internos. Si vamos a poner un enlace externo, debe usarse una URL absoluta, de lo contrario, los navegadores no serán capaces de alcanzar el recurso.
El enlace relativo depende de la ruta en la que se encuentra el documento HTML actual. Se usa el símbolo de la barra / como elemento separador entre directorios de una ruta, y también se usa para indicar la raíz del directorio. Si se necesita enlazar un archivo que se encuentra ubicado en el directorio anterior se usa ../, que se puede encadenar tantas veces como sea necesario.
Estos ejemplos también pueden ser válidos:
<a href='paisajes/mar.html'>El mar</a>
<a href='/paisajes/mar.html'>El mar</a>
<a href='../paisajes/mar.html'>El mar</a>
<a href='../../paisajes/mar.html'>El mar</a>
El elemento <base>
En la mayoría de casos del uso de los enlaces relativos, que el navegador resuelva por sí mismo el protocolo y el dominio será la opción deseada por parte del desarrollador. No obstante, existe la posibilidad de especificar una dirección de base diferente. Esto es posible gracias al elemento <base>.
Con el elemento <base> lo que se hace es especificar una dirección URL que sirva de base y que será utilizada para completar todas las direcciones relativas que existen dentro del documento HTML o página web. Este elemento debe ir dentro de las etiquetas <head> y </head> y sólo debe declararse una vez.
Al tratarse de un elemento vacío, no tiene contenido ni etiqueta de cierre. En su lugar, utiliza ciertos atributos. Por ejemplo, para especificar la URL de base se utiliza el atributo href. También es posible usar el atributo target para establecer una conducta predeterminada a todos los enlaces del documento.
Enlazar imágenes
Los enlaces de texto son los más habituales, pero también se puede usar imágenes como enlace. Esto significa que podemos hacer clic sobre una imagen y que ésta nos permita navegar a otro destino. Para lograrlo es tan sencillo como insertar el elemento de imagen (<img>) dentro de las etiquetas de los enlaces.
Ejemplo de código de una imagen como enlace:
<a href='/paisajes/mar.html'>
<img srd='mar.jpg'>
</a>
Para saber más sobre el elemento de imagen y todos sus atributos, es conveniente leer el artículo sobre imágenes.
