El día a día de un desarrollador web requiere mucho más que escribir líneas de código en un lenguaje determinado. Además, un proyecto necesita organización y comunicación entre archivos para funcionar. En este post, te enseñaremos qué son y cómo funcionan las rutas de archivos HTML, fundamentales para enlazar archivos dentro de proyectos web.
¿Qué son las rutas de archivos HTML?
Las rutas de archivos HTML son un estándar de acceso a archivos dentro del directorio de un proyecto web, basado en puntos y barras oblicuas. Estas rutas son las que insertamos en los distintos métodos para insertar medios en un proyecto web. Es decir, en la propiedad src de las etiquetas de medios como img y script.
Entender cómo funcionan las rutas de archivos HTML es fundamental para organizar archivos de un proyecto frontend. Ten esto presente cuando vayas a reorganizar tus archivos o a la hora de empezar un nuevo proyecto web.
De manera general, las rutas de archivos HTML funcionan en relación al archivo en que el que estamos importando. Es decir, las rutas señalan el camino que se debe tomar desde el archivo actual hasta el archivo que queremos importar. A continuación, te explicamos esto más a fondo.
¿Cómo funcionan las rutas de archivos HTML?
Las rutas de archivos HTML funcionan como mapas del camino que hay que recorrer entre los directorios de nuestro proyecto. De manera general, estas definen las rutas de carpetas y archivos dentro del mismo directorio separándolas por barras oblicuas. Para acceder a otros niveles del directorio, usamos los puntos. A continuación, te ponemos algunos ejemplos para que aclaremos esta idea.
Acceder a un archivo dentro del mismo directorio
Para acceder a un archivo dentro del mismo directorio, que no forma parte de otra carpeta, simplemente usamos el nombre del archivo para declarar su ruta. Es decir, si estamos accediendo a un archivo hermano del actual, simplemente insertamos lo siguiente:
nombreArchivo.formato.
Para acceder a un archivo dentro del mismo directorio, pero que se encuentra en una carpeta distinta, deberemos usar las barras oblicuas. En este caso, el archivo actual y la carpeta serían hermanos. Este tipo de rutas de archivos HTML se declaran de la siguiente manera:
nombreCarpeta/nombreArchivo.formato.
La estructura anterior también se utiliza cuando estamos manejando una referencia a un subdirectorio del archivo actual:
subdirectorio/nombreArchivo.formato
Acceder a un archivo arriba del archivo actual
Ya hemos visto cómo acceder a un archivo inferior al actual. Ahora, para acceder a un archivo encima o superior al archivo actual, deberemos usar dos puntos seguidos. Es decir, de la siguiente manera:
../nombreArchivo.formato
Ten presente que puedes combinar estas opciones para lograr dirigirte al archivo que desees. Es decir, puedes acceder a un archivo superior que, a la vez, se encuentre en una subcarpeta del directorio superior.
Esperamos que en este post hayas comprendido la importancia de la organización de archivos a la hora de desarrollar para la web. Si quieres conocer más sobre este ejercicio, te invitamos a leer el artículo sobre el manejo de archivos en Mozilla Developer Network.
¿Qué sigue?
Ahora que sabes cómo funcionan las rutas de archivos HTML, ¡te invitamos a utilizarlas en tus propios proyectos web! Si quieres seguir aprendiendo sobre la creación y desarrollo de este tipo de proyectos, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás los conceptos, lenguajes y herramientas fundamentales para este ejercicio. ¡Pide información y transforma tu futuro!
