Rutas de Archivo en HTML
Aprende sobre las rutas de archivo en HTML, la diferencia entre rutas absolutas y relativas, y ejemplos prácticos de uso.
Una ruta de archivo describe la ubicación de un archivo dentro de la estructura de carpetas de un sitio web. Cada vez que una página necesita cargar o apuntar a otro recurso, usa una ruta de archivo para encontrarlo.
Esta página cubre los dos tipos de rutas de archivo — absolutas y relativas — las distintas formas que puede tomar una ruta relativa y cuál usar en la práctica. Usarás rutas de archivo constantemente al trabajar con:
- páginas web (en enlaces)
- imágenes
- archivos JavaScript
- hojas de estilo
Tipos de Rutas de un Vistazo
Cada ruta que escribes es una de las siguientes. Las mismas reglas se aplican tanto si la ruta aparece en un <a href>, <img src>, <link href> o <script src>.
| Ruta | Tipo | Significado | Cuándo usarla |
|---|---|---|---|
https://example.com/img/cat.jpg | URL absoluta | La dirección completa, incluyendo el protocolo y el dominio. | Para enlazar a un archivo en otro sitio web. |
/images/cat.jpg | Relativa a la raíz | Comienza en la raíz del sitio (la / inicial), independientemente de la ubicación de la página actual. | Recursos del sitio (logotipos, CSS/JS globales) compartidos por muchas páginas. |
images/cat.jpg | Relativa (mismo directorio) | Comienza desde la carpeta de la página actual. Equivalente a ./images/cat.jpg. | Archivos almacenados junto a la página. |
../images/cat.jpg | Relativa (directorio padre) | .. sube un nivel en la carpeta y luego baja a images. | Para acceder a un archivo que se encuentra por encima de la página actual. |
Una ruta relativa a la raíz es técnicamente también una ruta relativa, pero la / inicial la hace relativa a la raíz del sitio en lugar de a la página actual, por lo que vale la pena tratarla como su propia categoría.
Rutas de Archivo Absolutas
Una ruta de archivo absoluta es la URL completa usada para acceder a un archivo, incluyendo el protocolo (https://) y el nombre de dominio. Funciona desde cualquier página porque no depende de dónde se encuentre la página actual.
Ejemplo de una ruta de archivo absoluta:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Usa una URL absoluta cuando el recurso se encuentra en un dominio diferente (por ejemplo, una imagen alojada en una CDN u otro sitio).
Rutas de Archivo Relativas
Una ruta de archivo relativa apunta a un archivo relativo a la página actual en lugar de escribir el dominio completo. Las rutas relativas tienen varias formas.
Mismo directorio
Cuando el archivo de destino está en la misma carpeta que la página actual, escribe solo el nombre del archivo. Agregar ./ (que significa "carpeta actual") es opcional y se comporta de manera idéntica.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Aquí images/smile.jpg se resuelve comenzando desde la carpeta que contiene la página actual.
Directorio padre
Usa ../ para subir un nivel en el árbol de carpetas. Cada ../ sube una carpeta más. Por ejemplo, ../images/smile.jpg sale de la carpeta actual y luego busca dentro de una carpeta images que está un nivel más arriba.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Relativa a la raíz
Una ruta que comienza con una barra diagonal (/) es relativa a la raíz: el navegador la resuelve desde la raíz del sitio web, ignorando dónde está la página actual. Esto es útil para recursos compartidos en todo el sitio, porque la ruta permanece igual sin importar qué tan profundo esté anidada una página.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Las Rutas No Son Solo para Imágenes
Las mismas reglas de ruta se aplican a todo atributo que haga referencia a un archivo. Un solo documento a menudo mezcla todas ellas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Buenas Prácticas
Prefiere las rutas relativas para los recursos que viven en tu propio sitio. Como no incluyen un dominio fijo, el sitio sigue funcionando cuando lo mueves a un nuevo dominio, cambias de http a https o lo ejecutas localmente durante el desarrollo. Reserva las URL absolutas para archivos alojados en otros sitios, y usa las rutas relativas a la raíz para los recursos globales que muchas páginas comparten.
Lee más sobre cómo enlazar páginas en el capítulo de Enlaces HTML y sobre cómo insertar imágenes con la etiqueta <img>.