Las URL absolutas y relativas
En la web podemos encontrar direcciones URL absolutas o relativas. Las absolutas son las que están completas desde el protocolo. Es decir, comienzan con http, https, ftp, etc.
Por ejemplo, una URL absoluta es:
https://www.google.com
En la que vemos que tenemos la URL desde el protocolo.
URLs relativas
En cambio, una URL relativa depende del lugar desde el que se la llame. Por ejemplo algunos ejemplos de URL relativa son:
imagen_1.jpg
css/estilos.css
/archivos/imagen_portada.jpg
../css/estilos.css
Todas estas URLs son completadas por el navegador dependiendo del lugar en el que este. Por ejemplo si estamos en la página:
https://www.misitio.com/articulo/mi_post
Las URLs antes mencionadas se transformaran en:
https://www.misitio.com/articulo/mi_post/imagen_1.jpg
https://www.misitio.com/articulo/mi_post/css/estilos.css
https://www.misitio.com/archivos/imagen_portada.jpg
https://www.misitio.com/articulo/css/estilos.css
Archivos sencillos
En el caso de las URL que mencionan solamente archivos como imagen_1.jpg, lo que sucede es que el navegador va a añadir todo el URL absoluto al principio. Entonces el archivo debería estar en la misma carpeta que la página HTML.
https://www.misitio.com/articulo/mi_post + imagen_1.jpg
=>
https://www.misitio.com/articulo/mi_post/imagen_1.jpg
Carpetas con archivos sencillos
Si además del nombre del archivo tenemos la dirección de las carpetas, entonces el navegador va a incluir todo el camino. Por ejemplo en el caso de css/estilos.css, significa que la carpeta css debería estar al lado de la página HTML.
https://www.misitio.com/articulo/mi_post + css/estilos.css
=>
https://www.misitio.com/articulo/mi_post/css/estilos.css
Comenzando con un slash
Si en una URL absoluta comenzamos con un slash, eso significa que el navegador irá a la raíz del sitio sin importar en qué lugar de la arborescencia nos encontremos.
https://www.misitio.com/articulo/mi_post + /archivos/imagen_portada.jpg
=>
https://www.misitio.com/archivos/imagen_portada.jpg
Carpeta anterior
Para ir a una carpeta anterior utilizamos dos puntos seguidos. También podemos concatenarlos, por ejemplo ../../ sirven para ir dos carpetas atrás en la arborescencia.
https://www.misitio.com/articulo/mi_post + ../css/estilos.css
=>
https://www.misitio.com/articulo/css/estilos.css
¿Debemos usar URLs relativas?
De preferencia no, la verdad es que muchos problemas en la red suceden justamente por el abuso de las URLs relativas. Cuando comenzamos a hacer evoluciones en un sitio web normalmente cambian las arborescencias o los nombres de carpetas y muchos enlaces a imágenes u hojas de estilo se pierden.
Lo mejor es utilizar siempre URLs absolutas en todos nuestros enlaces. Incluso así facilitamos el trabajo de los robots que analizan nuestro sitio para posicionarnos en los sitios de búsqueda.
