Rutas de archivos en HTML

En HTML, a menudo se hace referencia a otros archivos como imágenes, CSS o JavaScript. Para cargar correctamente estos elementos, debemos especificar la ruta adecuada.

Ruta absoluta

Una ruta absoluta es una URL completa que comienza con el protocolo (https://) y el dominio. Úsala al referirte a archivos externos.

<img src="https://example.com/images/logo.png" alt="Logo">

Ruta relativa

Una ruta relativa define la ubicación con respecto al archivo actual. Es el método más común dentro de la estructura de tu proyecto.

<img src="images/photo.jpg" alt="Photo">

Acceder a un archivo desde una carpeta superior

Si el archivo de destino está un nivel por encima del actual, usa ../ para alcanzar la carpeta superior.

<img src="../assets/image.png" alt="Image from parent folder">

Acceder a un archivo en la misma carpeta

Si el archivo está en la misma carpeta que tu archivo HTML, simplemente escribe el nombre del archivo.

<link rel="stylesheet" href="style.css">

Acceder a un archivo en una subcarpeta

Si el archivo está en una subcarpeta, primero escribe el nombre de la carpeta y luego el nombre del archivo, por ejemplo: 'scripts/main.js'.

<script src="scripts/main.js"></script>

Consejos para usar rutas

Verifica siempre tu estructura de carpetas y archivos. Evita caracteres inválidos (como espacios o acentos) y usa nombres consistentes. Recuerda que los nombres de archivo pueden ser sensibles a mayúsculas y minúsculas, especialmente en servidores.

Ejemplo de estructura de proyecto

La estructura de carpetas que aparece a continuación ayuda a ilustrar cómo podría verse un proyecto básico en HTML:

project/
├── index.html
├── style.css
├── images/
│   └── logo.png
└── scripts/
    └── app.js

En la estructura anterior, así es como puedes acceder a otros archivos desde index.html. Este tipo de visual ayuda a comprender las rutas.

Ejemplo práctico

Veamos un ejemplo práctico de cómo referenciar correctamente varios archivos en un proyecto real:

<!-- Reference to an image -->
<img src="images/logo.png" alt="Logo">

<!-- Reference to a CSS file -->
<link rel="stylesheet" href="style.css">

<!-- JavaScript script -->
<script src="scripts/app.js"></script>

Resumen

Especificar correctamente las rutas es crucial, especialmente en proyectos grandes. Asegúrate siempre de que la ruta refleje la estructura real de archivos.