Rutas relativas y absolutas

Cada vez que usas href o src (en un enlace, una imagen, una hoja de estilos o un script) le estás diciendo al navegador dónde encontrar un archivo. Esa dirección es una ruta. Es uno de los puntos donde más se equivoca la gente que empieza, así que merece una lección propia.

Usaremos esta estructura de carpetas como ejemplo:

mi-web/
├── index.html
├── contacto.html
├── css/
│   └── estilos.css
├── img/
│   └── logo.png
└── blog/
    ├── index.html
    └── primer-post.html

1. URL completa (absoluta)

Empieza por https:// e incluye el dominio. Se usa para enlazar otras webs:

<a href="https://developer.mozilla.org/es/">MDN</a>
<img src="https://picsum.photos/400/200" alt="Foto de ejemplo">

2. Ruta relativa

No empieza ni por / ni por https://. Se calcula desde la carpeta donde está el archivo HTML actual.

Desde index.html:

<a href="contacto.html">Contacto</a>              <!-- en la misma carpeta -->
<img src="img/logo.png" alt="Logo">                <!-- dentro de la carpeta img -->
<link rel="stylesheet" href="css/estilos.css">
<a href="blog/primer-post.html">Mi primer post</a>

.. significa “sube una carpeta”. Desde blog/primer-post.html:

<a href="../index.html">Volver al inicio</a>
<img src="../img/logo.png" alt="Logo">
<a href="index.html">Todos los posts</a>          <!-- el index.html de blog/ -->

Puedes encadenarlos: ../../ sube dos carpetas. Y ./archivo.html es lo mismo que archivo.html (el punto significa “esta carpeta”).

Ventaja: si mueves la carpeta entera mi-web a otro sitio (otro ordenador, otro servidor, otro dominio), todo sigue funcionando.

3. Ruta absoluta desde la raíz

Empieza por /. Se calcula desde la raíz del sitio web, sin importar dónde esté el archivo actual:

<img src="/img/logo.png" alt="Logo">
<link rel="stylesheet" href="/css/estilos.css">

Funciona igual desde index.html que desde blog/primer-post.html. Por eso es muy práctica en webs con muchas carpetas.

Pero cuidado: la raíz no siempre es la misma:

• Si la página se sirve desde un servidor web (como npm run dev o tu hosting), / es la carpeta raíz de la web.
• Si abres el archivo con doble clic desde tu disco (file:///...), / es la raíz de tu disco duro, y las rutas absolutas no encontrarán nada.

Por eso, si una web te funciona en el servidor pero no al abrirla con doble clic (o al revés), casi siempre es por las rutas.

El error más grave: rutas de tu ordenador

<img src="C:\Users\ana\Escritorio\mi-web\img\logo.png" alt="Logo">  <!-- ✗✗✗ -->
<img src="/home/ana/proyectos/mi-web/img/logo.png" alt="Logo">       <!-- ✗✗✗ -->

En tu ordenador funciona, pero en el de cualquier otra persona (o en el servidor) no existe esa carpeta. Nunca escribas rutas que incluyan tu usuario o tu disco.

Otros errores típicos

• Barras invertidas. En la web siempre se usa /, nunca \ (aunque uses Windows).
• Mayúsculas. Los servidores suelen distinguirlas: Logo.PNG y logo.png son archivos distintos. Usa siempre minúsculas en los nombres de archivos.
• Espacios y tildes en los nombres: mi foto de perfil.jpg o diseño.css dan problemas. Usa guiones: mi-foto-de-perfil.jpg.
• Olvidar la carpeta: escribir logo.png cuando está en img/logo.png.

¿Qué tipo uso?

Caso	Tipo de ruta
Otra web	URL completa (https://...)
Proyecto pequeño o que abrirás con doble clic	Relativa (img/logo.png)
Web con muchas carpetas servida desde un servidor	Absoluta desde la raíz (/img/logo.png)

Cómo depurar una ruta

Abre las herramientas del navegador (F12) y ve a la pestaña Red (Network). Recarga la página: los archivos que no se encuentran aparecen en rojo con el código 404. Pasa el ratón por encima y verás la dirección completa que ha intentado cargar el navegador. Compárala con dónde está realmente el archivo.

Todo esto se aplica igual a las rutas de JavaScript, de CSS (por ejemplo en background-image: url(...)) y de cualquier lenguaje de programación.