Cuando un proyecto solo funciona en tu ordenador pero no en el de otra persona, casi siempre el problema está en las rutas de archivos en HTML y CSS. Saber cómo enlazar archivos correctamente en HTML y CSS es esencial para la organización y la funcionalidad de un proyecto. En este artículo, estudiaremos las rutas de archivos en HTML y CSS, qué son, cómo funcionan y cómo usarlas.
1. ¿Qué es una ruta?
Una ruta indica dónde está un archivo dentro de tu proyecto. La usamos para enlazar:
- Imágenes
- Archivos CSS
- Archivos JavaScript
- Recursos multimedia
Ejemplo sencillo en el que especificamos: “La imagen está en la misma carpeta que este HTML”.
<img src="imagen.png" alt="Descripción de la imagen">
2. Tipos de rutas
2.1. Rutas relativas
Son las que debes usar en tus proyectos. Se calculan en función de dónde está el archivo actual.
Ejemplos:
Archivo en la misma carpeta:
<img src="imagen.png" alt="Descripción">
Archivo en una subcarpeta:
<img src="imagenes/foto.jpg">
Archivo en una carpeta superior:
<img src="../foto.jpg">
Archivo si necesitas subir dos niveles:
<img src="../../foto.jpg">
2.2. Rutas absolutas del servidor
Empiezan por / y buscan desde la raíz del proyecto en el servidor:
<img src="/imagenes/foto.jpg">
Funcionan cuando el proyecto está en un servidor web configurado. En proyectos locales pueden generar confusión si no entiendes bien la estructura.
2.3. Rutas absolutas completas (URL)
Son direcciones completas y se usan cuando el recurso está en otro servidor.:
<img src="https://undominio.com/imagenes/foto.jpg">
3. El error que no debes cometer: usar rutas del disco duro
Esto es lo que NO debes hacer:
<img src="C:\Users\Juan\Desktop\web\imagen.png">
¿Por qué está mal?
- Solo funciona en tu ordenador.
- Esa ruta pertenece a tu sistema operativo.
- Cuando otra persona abre el proyecto, esa carpeta no existe.
- En un servidor web esa ruta no tiene ningún sentido.
En desarrollo web, las rutas deben ser relativas al proyecto, no a tu ordenador.
La forma correcta sería:
<img src="imagenes/imagen.png">
4. Cómo funcionan las rutas en CSS (otro error muy común)
En CSS las rutas se calculan desde el archivo CSS, no desde el HTML.
Imagina esta estructura:
proyecto/
│
├── index.html
├── css/
│ └── estilos.css
└── imagenes/
└── fondo.jpg
Dentro de estilos.css, la ruta correcta sería:
background-image: url("../imagenes/fondo.jpg");
¿Por qué? Porque el CSS está dentro de la carpeta css, así que primero debemos subir un nivel (../) y luego entrar en imagenes.
5. Buenas prácticas antes de entregar un proyecto
Antes de subir o entregar tu trabajo, revisa esto:
- No hay rutas que empiecen por
C:\ - Todas las imágenes se ven correctamente
- Has comprobado el proyecto desde otra carpeta o equipo
- Tu estructura de carpetas es lógica
Una estructura sencilla suele funcionar mejor:
proyecto/ │ ├── index.html ├── css/ ├── js/ └── imagenes/
6. Tabla resumen de las rutas en HTML y CSS
Después de ver los distintos tipos de rutas y los errores más habituales, veamos un resumen para que puedas comprobar rápidamente si estás usando la ruta correcta en tu proyecto.
| Tipo de ruta | Ejemplo | ¿Desde dónde se calcula? | ¿Cuándo usarla? | ¿Es recomendable en proyectos de clase? |
|---|---|---|---|---|
| Relativa (misma carpeta) | imagen.png | Desde el archivo actual | Cuando el recurso está en la misma carpeta | Sí |
| Relativa (subcarpeta) | imagenes/foto.jpg | Desde el archivo actual | Cuando el recurso está dentro de una carpeta | Sí |
| Relativa (carpeta superior) | ../foto.jpg | Desde el archivo actual | Cuando necesitas subir un nivel | Sí |
| Relativa múltiple | ../../img/foto.jpg | Desde el archivo actual | Cuando debes subir varios niveles | Sí |
| Absoluta del servidor | /imagenes/foto.jpg | Desde la raíz del proyecto en el servidor | Cuando trabajas en un servidor configurado | Depende |
| Absoluta completa (URL) | https://midominio.com/img.jpg | Desde una dirección web externa | Cuando el recurso está en otro servidor | Solo si es necesario |
| Ruta del disco duro (incorrecta) | C:\Users\Nombre\Desktop\img.jpg | Desde tu ordenador | Nunca en desarrollo web | No |
Como ves, si tu proyecto depende de rutas del escritorio o de tu carpeta personal, algo está mal planteado. Las rutas no son un detalle menor. Son la base de que un proyecto web funcione en cualquier entorno.