Los enlaces son la base fundamental que conecta las páginas web y hace posible la navegación por Internet. Cuando hacemos clic en un enlace, pasamos de una página a otra, ya sea dentro del mismo sitio o hacia un servidor completamente diferente. Comprender cómo crear estos enlaces en HTML es esencial para construir sitios web funcionales y bien organizados.
Para crear un enlace en HTML utilizamos la etiqueta a, que necesita un atributo especial llamado href. Este atributo indica la dirección a la que queremos que nos lleve el enlace. Por ejemplo, para enlazar a Google, escribiríamos:
<a href="https://www.google.com">Este enlace te lleva a Google</a>
Es importante incluir el protocolo completo (https:// o http://) cuando enlazamos a sitios externos, ya que si no lo hacemos, el navegador interpretará la dirección como un enlace relativo dentro de nuestro propio servidor, lo que causará errores.
Existen tres tipos principales de enlaces que debemos conocer: enlaces externos, enlaces internos absolutos y enlaces internos relativos.
Los enlaces externos nos llevan a páginas alojadas en otros servidores. En estos casos, siempre debemos escribir la URL completa, incluyendo el protocolo y el dominio, para que el navegador sepa que debe salir de nuestro sitio y dirigirse a otro.
Los enlaces internos son aquellos que apuntan a páginas dentro del mismo servidor. Aquí podemos distinguir dos formas de escribirlos: de manera absoluta y de manera relativa.
Un enlace interno absoluto comienza desde la raíz del servidor. Por ejemplo, si nuestro dominio es www.ejemplo.com y queremos enlazar a una página llamada misvacacionesdeagosto.html que está dentro de la carpeta blog, escribiríamos:
<a href="/blog/misvacacionesdeagosto.html">Mis vacaciones de agosto</a>
La barra inicial indica que partimos desde la raíz del servidor, y a partir de ahí navegamos por las carpetas hasta llegar al archivo deseado.
Por otro lado, los enlaces internos relativos se escriben en función de la ubicación del archivo actual. Es como dar indicaciones para llegar a un lugar desde donde estamos. Por ejemplo, si estamos en un archivo llamado enlaces.html dentro de la carpeta pruebas, y queremos enlazar a otro archivo llamado contacto.html que está en la misma carpeta, simplemente escribimos:
<a href="contacto.html">Ver información de contacto</a>
Si queremos enlazar a un archivo que está en la carpeta padre, es decir, un nivel arriba, usamos ../ para subir un nivel. Por ejemplo, si desde pruebas/enlaces.html queremos enlazar a archivos/historia.html, escribiríamos:
<a href="../historia.html">Ver la historia</a>
Y si el archivo está en una subcarpeta dentro de la carpeta padre, como archivos/anteriores/2010.html, combinamos las instrucciones:
<a href="../anteriores/2010.html">Ver el informe de 2010</a>
Es fundamental entender estas diferencias y escribir correctamente las rutas para que los enlaces funcionen como esperamos. Por ejemplo, si olvidamos el protocolo en un enlace externo, el navegador intentará buscar ese enlace dentro de nuestro servidor, lo que no es correcto. De igual forma, si ponemos una barra inicial en un enlace relativo, el navegador interpretará que debe buscar desde la raíz, no desde la ubicación actual, lo que puede llevar a errores.
En resumen, para crear enlaces efectivos debemos tener claro si queremos dirigir al usuario a otro sitio web, a otra página dentro de nuestro servidor desde la raíz, o a otra página relativa a la ubicación actual. Así, podremos construir una navegación coherente y sin problemas para nuestros usuarios.
Los enlaces de ancla, que permiten saltar a secciones dentro de la misma página, son otro tema interesante que exploraremos más adelante.