— Bueno, en la lección anterior hablamos sobre enlaces relativos y absolutos, pero, lo cierto es que toca profundizar un poco más sobre el tema. Las páginas web habituales suelen contener decenas de enlaces de diferentes tipos. La siguiente imagen muestra algunos de los tipos de enlaces de la página principal de infobae:

1. Enlaces externos

En esa página, cuando se hace clic sobre algunos enlaces, el navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios. Estos enlaces se conocen como “enlaces externos“.

2. Enlaces internos

Sin embargo, la mayoría de enlaces de un sitio web te direccionan hacia páginas del propio sitio web, por lo que se denominan “enlaces internos“.

3. URLs absolutas

Además de los links internos y externos, la otra característica que diferencia a los enlaces (y, por tanto, también a las URL) es si el enlace es absoluto o relativo.

Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

4. URLs relativas

Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.

Imaginate que tenés una URL publicada en http://tupacbruch.com/blog/SEO/curso_seo.html y querés incluir un enlace a otra URL que se encuentra en http://tupacbruch.com/curso/seo/introduccion-al-seo.html; el punto de esto es la navegabilidad en nuestro sitio, además de hacer link building (buena práctica SEO).

Identificando las URLs

Bueno, en este punto lo que debemos entender, es que las URLs sirven para identificar recursos en internet. Entonces, para alcanzar cualquier recurso, alcanza simplemente con escribir dicha dirección URL.

Bueno, la importancia de esto es que hay dos maneras de interpretar esto. — ¿Cómo?, con las propias URLs relativas y absolutas. Cuando estamos en fase de desarrollo de un sitio web, no siempre tenemos un dominio de antemano, entonces las URLs relativas toman una especial relevancia. Pues, cómo veremos ahora, las URLs relativas son una versión abreviada de la URL absoluta.

El punto de tener una versión relativa es para simplificar el proceso de desarrollo, y también para que no se rompa todo cuando queremos migrar un sitio web hacia otro dominio. Entonces, considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:

URL absoluta: http://tupacbruch.com/blog/SEO/curso_seo.html
URL relativa: /blog/SEO/curso_seo.html

Pero, ¿cómo funciona?

Bueno, en el ejemplo anterior, las dos URL son pertinentes a un mismo recurso, pero, ¿cómo es que se alcanza?. Bueno, se llega a alcanzar dicho recurso porque cuando no se indica el protocolo y el servidor de una URL, los navegadores suponen que son los mismos que los de la página origen. Entonces, cuando el navegador encuentra la URL /blog/SEO/curso_seo.html, el mismo realiza el siguiente proceso:

1. El navegador se encuentra una URL relativa, entonces, interpreta y determina que la URL absoluta es la misma en la que se encuentra el recurso enlazado.
2. Entonces, como a la URL relativa le falta el protocolo y el servidor, el navegador busca los mismos de la página origen, en este caso serían: “https://” y “tupacbruch.com“. (Si no se especifica el protocolo, el HTTP es el que se interpreta por defecto).
3. Luego, el navegador añade los faltantes para convertir la URL relativa en absoluta, resultando en algo así: https:// + tupacbruch.com + /blog/SEO/curso_seo.html = https://tupacbruch.com/blog/SEO/curso_seo.html.

Si bien el ejemplo es muy simple, alcanza para entender el funcionamiento de las URLs relativas y absolutas. Sin embargo, cabe mencionar que existen otros casos más avanzados en los que se prescinde de parte o toda la ruta del recurso que se enlaza, veamos cuáles son estas situaciones:

1. Cuando la URL de origen y destino se encuentran en el mismo directorio

Cómo el título lo indica, si desde una página web se quiere enlazar un recurso que se encuentra dentro del mismo directorio del servidor; la URL relativa puede prescindir de todas las partes de la URL absoluta, salvo el nombre del propio recurso enlazado.

Esto pasa cuando el navegador se encuentra con una URL relativa que solo consiste en el nombre de un recurso; el mismo programa supone que tanto el protocolo, como el servidor, y el propio directorio del recurso enlazado son los mismos que los del origen del enlace.

2. Cuando el destino del enlace se encuentra cerca de su origen y en un nivel superior

A diferencia de lo que ocurre en el ejemplo anterior, en este, el recurso que se enlaza no está en el mismo directorio que el origen del enlace; sin embargo, si el propio recurso está cerca y en algún directorio superior, podremos enlazarlo sin problema. Pero, para ello, la propia URL relativa debe indicar de alguna manera que es necesario subir un nivel en la jerarquía de directorios para llegar hasta el recurso.

Entonces, si queremos indicarle al navegador que se debe subir un nivel, se incluyen dos puntos y una barra (../) en la ruta del recurso enlazado. Pues, de esta forma, cada vez que aparece ../ en una URL relativa, significa que se debe subir un nivel.

De aquí, podemos ver como el propio navegador encuentra la URL relativa ../examen_1.html. Pues, el propio navegador “sabe” que para encontrar el recurso enlazado (examen_1.html) tiene que subir un nivel desde el lugar en el que se encuentra esa URL relativa. Deduciendo que la propia página que incluye en esa URL se encuentra en el directorio curso/seo/introduccion/, por lo que debe subir un nivel y entrar en curso/seo/.

— Pero, ¿qué pasaría si el destino se encuentra un par de niveles por encima?. Lo mismo, pero con una adición extra, pues, debemos incluir “../” dos veces seguidas:

Además de que se pueden subir niveles, también se puede entrar en otros directorios diferentes para obtener los propios recursos:

Entonces, para ir cerrando con los ejemplos de niveles superiores, me gustaría comentar que si se intentan subir más niveles de los que es posible, el navegador ignora todos los ../ sobrantes. Si la página que tiene el enlace es https://tupacbruch.com/curso/seo/introduccion/curso_SEO_parte_1.html y la URL relativa que se incluye es ../../../../../curso_wordpress.html, el navegador lo interpretará como ../../../curso_wordpress.html.

Esto ocurre porque el objetivo de las URLs relativas es crear una URL más corta y sencilla que las URL absolutas. Por eso, este método solo se puede utilizar cuando el origen y el destino se encuentran cerca; ya que, de otro modo, la URL relativa podría no alcanzar el recurso deseado, complicando nuestro proceso de desarrollo.

3. El destino del enlace se encuentra cerca de su origen, pero en un nivel inferior

Este caso es muy similar al anterior, pero más sencillo. Si el recurso enlazado se encuentra en algún directorio inferior al que se encuentra el origen, solo es necesario indicar el nombre de los directorios a los que debe entrar el navegador.

Al igual que lo que ocurre en los ejemplos anteriores, se pueden indicar varios directorios seguidos para que el navegador descienda jerárquicamente por la estructura de directorios:

4. El último se da cuando el origen y el destino del enlace se encuentran muy alejados

Este caso ocurre cuando el origen y el destino de un enlace se encuentran muy alejados, pero, siempre en el mismo servidor. Cuando esto ocurre, las URL relativas pueden ser complicadas, pero se pueden utilizar. Para hacerlo, tenemos que añadir un ../ para subir por la jerarquía de directorios y luego, se puede indicar cualquier directorio.

En estos casos, lo más fácil es indicar la ruta completa hasta el recurso enlazado comenzando desde la raíz del servidor web. Por lo tanto, estas URL relativas solo omiten el protocolo y el nombre del servidor.

Resumen:

Entonces, cuando la URL relativa comienza por /, el navegador considera que es la ruta completa comenzando desde la raíz del servidor, por lo que solo le añade el protocolo y el nombre del servidor origen.

A continuación se resumen los cuatro posibles casos de URL relativas y el procedimiento que sigue el navegador para convertirlas en URL absolutas: