Al principio tuve bastantes problemas con las rutas absolutas y relativas, y sobre todo con el nombre de los archivos: yo hacía el documento en Windows y mi profesor lo abría en Linux, y casi todas las rutas me daban error. Así aprendí a usarlas de verdad — a la fuerza, viendo por qué fallaba algo que en mi propio ordenador funcionaba perfectamente.
Por qué me funcionaba en Windows y fallaba en Linux
El motivo de fondo no era la ruta en sí, era algo más simple y más fácil de pasar por alto: Windows no distingue mayúsculas de minúsculas en los nombres de archivo, y Linux sí. Si en mi proyecto tenía un archivo Imagenes/Foto.jpg y en el HTML escribía <img src="imagenes/foto.jpg">, en mi Windows cargaba sin problema — el sistema operativo ni se entera de la diferencia. En cuanto mi profesor abría exactamente el mismo proyecto en Linux, esa ruta dejaba de existir literalmente, porque Imagenes y imagenes son dos carpetas distintas para Linux.
Esto no tiene nada que ver con “rutas mal escritas” en el sentido de sintaxis — la ruta estaba bien construida, pero el nombre exacto (mayúsculas incluidas) tiene que coincidir letra por letra en sistemas que sí distinguen mayúsculas de minúsculas, como Linux, que es donde vive de verdad casi cualquier servidor web.
Ruta absoluta vs ruta relativa
Una ruta absoluta indica dónde está un archivo empezando desde el directorio raíz del sistema de ficheros. Una ruta relativa indica dónde está un archivo empezando desde el directorio donde está el documento actual. La diferencia importa porque una ruta relativa depende de desde dónde la escribas, mientras que una absoluta siempre apunta al mismo sitio, la escribas desde donde la escribas.
Para construir rutas relativas hay tres símbolos que hay que tener completamente interiorizados:
./— el directorio actual (a veces se puede omitir, es implícito).../— el directorio padre, un nivel hacia arriba.nombre_carpeta/— entrar dentro de esa carpeta concreta.
Un ejemplo con el árbol de arriba
Con la estructura de carpetas del diagrama (A contiene B y C; B contiene D, E y F1; C contiene F2 y F3), para acceder al archivo F1:
- Ruta absoluta, desde cualquier sitio:
A/B/F1 - Ruta relativa desde D (que está dentro de B, al mismo nivel que F1):
../F1— subes un nivel (de D a B) y ahí está F1. - Ruta relativa desde E (también dentro de B): igual que desde D,
../F1. - Ruta relativa desde F2 (que está dentro de C, no de B): tendrías que subir a A y bajar a B:
../../B/F1.
Fíjate en el matiz: la misma ruta relativa (../F1) es válida desde D y desde E porque ambas están al mismo nivel dentro de B, pero sería completamente inválida escrita desde F2, porque F2 está en una rama distinta del árbol.
Los tres tipos de enlace que puedes escribir en HTML
Aplicado a un enlace <a href="..."> o una imagen <img src="...">, hay tres formas de referenciar un recurso:
<!-- Enlace local relativo: en el mismo directorio -->
<a href="tiberio.html">Tiberio</a>
<!-- Enlace local relativo: dentro de una subcarpeta -->
<a href="emperadores/tiberio.html">Tiberio</a>
<!-- Enlace local relativo: subiendo al directorio padre -->
<a href="../tiberio.html">Tiberio</a>
<!-- Enlace local absoluto: desde la raíz del sitio -->
<a href="/tiberio.html">Tiberio</a>El último caso (/tiberio.html, empezando por barra) es distinto de una URL absoluta completa como https://ejemplo.com/tiberio.html — es una ruta absoluta dentro del propio dominio, útil porque no cambia da igual desde qué página del sitio la uses, sin tener que ir contando niveles con ../.
Rutas relativas vs URL completa: no es lo mismo
Todo lo anterior aplica a recursos dentro de tu propio proyecto. Cuando enlazas a un sitio externo, necesitas la URL completa, con protocolo incluido:
<!-- Enlace externo: necesita la URL completa -->
<a href="https://www.google.com">Google</a>
<!-- Enlace interno: ruta relativa o absoluta dentro del propio sitio -->
<a href="/contacto.html">Contacto</a>Un error común al empezar es escribir <a href="www.google.com"> sin el https:// delante. El navegador, en ese caso, no lo interpreta como una URL externa — lo trata como si fuera una ruta relativa dentro de tu propio sitio, buscando una carpeta o archivo llamado literalmente www.google.com que, evidentemente, no existe. El protocolo (https://, http://, ftp://…) es precisamente lo que le dice al navegador “esto no es un recurso local, sal a buscarlo fuera”.
Por qué esto pasa constantemente en proyectos reales
No es solo un problema de clase con dos sistemas operativos distintos. Es la misma razón por la que un proyecto que funciona en tu ordenador puede romperse al subirlo a un servidor: los servidores web casi siempre corren sobre Linux, así que cualquier inconsistencia de mayúsculas/minúsculas que “colara” en tu Windows local se convierte en un enlace roto en cuanto el proyecto vive en el sitio real donde va a estar publicado.
Pon a prueba lo que has entendido
Un proyecto funciona perfectamente en tu Windows, pero al subirlo a un servidor Linux algunas imágenes no cargan. ¿Cuál es la causa más probable?
Resumen rápido
Una ruta absoluta siempre parte de la raíz del sistema o del sitio; una relativa parte del documento actual, usando ./ (aquí mismo), ../ (sube un nivel) y el nombre de carpeta para entrar en ella. El fallo más común al mover un proyecto entre sistemas no suele ser la ruta mal escrita, sino que Windows ignora mayúsculas/minúsculas y Linux no — algo que solo se nota cuando el proyecto cambia de sistema operativo, normalmente al desplegarlo de verdad.