Una de las etiquetas más importantes de HTML (sino la que más) es la etiqueta <a>. Esta etiqueta se utiliza para crear los llamados enlaces, vínculos o hipervínculos. La idea es establecer una referencia a una dirección o URL donde está alojado ese otro documento de destino, que puede ser una página web, un archivo PDF, una imagen o cualquier otro tipo de documento.

Etiqueta Descripción
<a> Etiqueta usada para hacer referencia a otras páginas web o recursos como documentos o archivos.

Esta etiqueta debe tener, como mínimo, el atributo href, ya que es el atributo con el que se especifica la dirección URL al documento que se quiere enlazar. Aún así, la etiqueta <a> también tiene varios atributos opcionales, veamos un resumen de todos ellos:

Atributo Valor Descripción
href URL Enlace al documento que se quiere cargar. Atributo obligatorio.
download nombre.ext Descarga el documento del href en lugar de abrirlo. Si se indica valor, se renombra.
target _blank Abre el enlace en una nueva pestaña.
_self Abre el enlace en la pestaña o <iframe> actual.
_parent Abre el enlace en el documento padre.
_top Abre el enlace en el documento raíz (padre global).
nombre Abre el enlace en el <iframe> con el nombre especificado.
rel alternate Indica que el enlace es una versión alternativa (idioma o formato diferente).
author Indica que el enlace es la web del autor de la página actual.
bookmark Indica que el enlace es un permalink a la sección de la página actual.
help Indica que el enlace ofrece ayuda para la página actual.
license Indica que la página actual está cubierta por la licencia referenciada.
prev Indica que el enlace es la parte previa del documento actual.
next Indica que el enlace es la parte siguiente del documento actual.
nofollow Indica que el enlace no está supervisado por el autor del sitio web.
noreferrer Indica al navegador que no envíe la página de donde se procede al visitar el enlace.
prefetch Indica al navegador que precargue el enlace, ya que el usuario hará clic en él.
search Indica que el enlace es una página para realizar búsquedas.
tag Asocia una etiqueta al enlace especificado, en relación al documento actual.
hreflang Idioma Código ISO 639-1 del idioma del documento.
type Tipo Tipo de contenido MIME al que se enlaza. Atributo no obligatorio.

Ten en cuenta, que el soporte del atributo download podría no funcionar correctamente, ya que no está demasiado extendido aún entre los diferentes navegadores:

Veamos a continuación algunos ejemplos de enlaces utilizando algunos atributos indicados en la tabla superior para comprender así su funcionamiento:

<ul>
  <li><a rel="author" href="http://www.emezeta.com/">Emezeta</a>
  <li><a href="http://lenguajecss.com/" target="_blank">LenguajeCSS</a>
  <li><a href="http://pagina.com/documento.pdf" download="A-38.pdf">PDF</a>
  <li><a href="http://pagina.com/documento-en.pdf" hreflang="en">PDF</a>
</ul>

Partes de una URL

Al indicarse una URL, tenemos varias formas de escribirla. Conviene conocer bien la estructura de una URL, para diferenciar cada una de sus partes. Este sería el esquema completo de un enlace completo:

Estructura de una URL

Protocolo Descripción
http:// Protocolo de transferencia de hipertexto. Es el que se usa habitualmente para páginas webs.
https:// Protocolo seguro de transferencia de hipertexto. Usado para cifrar información sensible.
ftp:// Protocolo de transferencia de ficheros. Similar a HTTP, pero orientado a enviar ficheros.
whatsapp:// Protocolo de WhatsApp. Se puede interactuar con WhatsApp si el usuario lo tiene instalado.

Un detalle importante que puedes encontrar respecto a esta primera parte de una URL es que se indique simplemente // al empezar un enlace. Esto indica que el navegador va a establecer http:// o https:// en el enlace, dependiendo de como se cargara el documento actual. Si el documento actual se cargó como http:// reemplazará // por http://, pero si el documento actual se cargó como https:// reemplazará // por https://. Esto nos permite más flexibilidad a la hora de cargar documentos o recursos.

Dominio Descripción
.com Originalmente para sitios comerciales, actualmente el más utilizado. Difícil conseguir dominio libre.
.net Quizás, la segunda opción por excelencia. Su nombre proviene de la palabra Internet.
.org Originalmente para organizaciones, actualmente es la tercera opción más utilizada.
.es Sitios webs orientados a España.
.com.es Dominio de segundo nivel orientado a España.
.cat Sitios webs orientados a Cataluña. Muy usado para sitios webs de gatos.
.la Sitios webs orientados a Laos. Muy usado para domain-hacks.
.me Sitios webs orietnados a Montenegro. Muy usado para domain-hacks.
.io Sitios webs orientados al Territorio Británico de Océano Índico. Muy usado como Input/Output.
.blog Nuevos gTLD (dominios genéricos) orientados a categorías. En este caso, a blogs.
.viajes Nuevos gTLD (dominios genéricos) orientados a categorías. En este caso, a webs sobre viajes.
URL Variable Contenido Significado
https://www.google.com/search?q=gato q gato Busca "gato"
https://www.google.es/search?q=gato&tbm=isch q gato Busca "gato"
tbm isch En Google Imágenes

Estado de un enlace

Por defecto, los enlaces tienen 3 estados diferentes:

URL con rutas relativas o absolutas

A la hora de indicar una URL, generalmente se puede hacer de varias formas:

Tipo de ruta Ejemplo ¿Dónde busca el archivo?
Sin ruta imagen.jpg En la misma carpeta del .html actual.
Relativa ascendente img/imagen.jpg En la carpeta img de la carpeta actual.
Relativa descendente ../imagen.jpg En la carpeta anterior a la actual. Evitar.
Relativa global /img/imagen.jpg El primer / simboliza el principio de la URL.
Absoluta http://pagina.com/img/imagen.jpg Exactamente en la URL indicada.

El usuario puede utilizar la forma de indicar la ruta que prefiera, eso sí, se aconseja ser coherente y utilizar siempre que se pueda un mismo formato de ruta. Particularmente, tiendo a evitar el tipo de ruta relativa descendente, ya que genera un código feo y ofuscado.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).