Las URL absolutas y relativas

En este artículo veremos la diferencia entre direcciones absolutas y relativas. Además de entender el funcionamiento de las 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.

56 me gusta
297 vistas
Anterior ¿Qué es una dirección URL?
Siguiente Los lenguajes de los sitios web
El Internet y la web

El Internet y la web

En este tutorial veremos los conceptos básicos del Internet y los sitios web. Aprenderemos como funcionan los nombres de dominio y los alojamientos.

¿Qué es el Internet?

En esta sección veremos los conceptos más básicos sobre el Internet y la World Wide Web.

¿Qué necesito para tener un sitio web?

En este artículo vamos a explorar las cosas básicas que se necesitan para lanzar un sitio web.

¿Qué sucede cuando visito un sitio web?

En esta sección veremos todo lo que sucede entre el momento en el que escribes algo en tu navegador y recibes un sitio web.

¿Qué es una dirección URL?

En este artículo explicamos a detalle lo que es una dirección URL o Uniform Resource Locator.
Tiene video

Las URL absolutas y relativas

En este artículo veremos la diferencia entre direcciones absolutas y relativas. Además de entender el funcionamiento de las relativas.
Tiene video

Los lenguajes de los sitios web

En este articulo veremos descripciones muy simples y directas sobre el HTML, CSS y JS, los tres lenguajes que utiliza la web.
Tiene video