Rutas de archivo HTML

Ya puedes escribir páginas con encabezados, párrafos y comentarios. Los sitios reales casi nunca viven en un solo archivo. Imágenes, otras páginas, hojas de estilos y scripts se sientan en carpetas junto a tu HTML — y HTML debe apuntar a ellos correctamente. Esos punteros son rutas de archivo. Si la ruta es incorrecta, el archivo puede existir en el disco mientras el navegador sigue mostrando una imagen rota o un enlace muerto. Por eso este tema es tan práctico: decide si tus referencias funcionan en el día a día.

¿Qué es una ruta de archivo?

Una ruta de archivo es la dirección que usa el navegador para obtener otro archivo. Suele escribirse en atributos como src (imágenes, scripts, medios) y href (enlaces, hojas de estilos y muchos recursos relacionados). La ruta no es decoración. Es una instrucción: «busca aquí». Cuando la instrucción es incorrecta, la petición falla aunque las etiquetas del marcado se vean bien. Piensa en las rutas como direcciones: un desvío equivocado te deja en el vacío aunque el edificio destino exista de verdad.

Respuesta directa

Usa una ruta relativa cuando el archivo objetivo viaja con las carpetas de tu proyecto — por ejemplo images/logo.png desde una página en la misma carpeta padre, o ../images/logo.png desde una página un nivel más profundo. Usa una ruta absoluta desde la raíz que empiece con / cuando el sitio esté alojado y todas las páginas deban compartir la misma ruta estable desde la raíz del sitio. Usa una URL completa (https://…) cuando el archivo vive en otro host o CDN. Los principiantes deberían dominar primero las rutas relativas, porque las carpetas de práctica local dependen de ellas. Las absolutas y las URL llegan después de forma natural — pero sin una navegación relativa segura, cada subcarpeta se convierte en un acertijo.

Relativo frente a absoluto de un vistazo

Un mapa pequeño de proyecto

Imagina una carpeta llamada project. Dentro tienes:

• index.html (página de inicio)
• about.html (misma carpeta que la de inicio)
• una carpeta images con logo.png
• una carpeta pages con contact.html
  El hábito importante es este: pregunta siempre qué archivo HTML estás editando antes de escribir src o href. La misma imagen necesita rutas relativas distintas desde páginas distintas. Cuando cambias el punto de vista — «¿desde qué archivo?» en lugar de «¿dónde está el logo en algún sitio?» — las rutas dejan de ser misteriosas y se vuelven previsibles.

Rutas relativas desde la carpeta del proyecto

Desde index.html o about.html, images y pages son carpetas hijas. No necesitas ../ para llegar a ellas. El navegador empieza en la carpeta del HTML actual y sigue cada segmento de la ruta paso a paso.

Por qué funcionan estos valores

• images/logo.png significa: «entra en la carpeta images junto a este HTML y abre logo.png»
• pages/contact.html significa: «entra en pages y abre contact.html»
• about.html significa: «otro archivo en la misma carpeta que la página actual»
• El texto alt no es una ruta; es texto accesible cuando la imagen no puede mostrarse
  Si el logo falta en el navegador, revisa la ortografía, el nombre real de la carpeta y si guardaste el HTML en la carpeta que crees. Un solo carácter mal escrito basta — y en algunos servidores mayúsculas y minúsculas distinguen Logo.PNG de logo.png.

Rutas relativas desde una subcarpeta

contact.html vive dentro de pages/. Desde ahí, images/ no es hija de pages/. Está al lado de pages/ bajo project/. Debes subir un nivel con ../ y luego entrar en images/. Exactamente esa geometría — «al lado» en lugar de «debajo» — es lo que muchos principiantes olvidan al mover una página a una subcarpeta.

Leer ../

• ../ significa: «sube a la carpeta padre»
• ../images/logo.png significa: «sube a project/ y luego entra en images/logo.png»
• ../index.html significa: «sube a project/ y abre index.html»
• Escribir images/logo.png desde contact.html busca pages/images/logo.png, que no existe en este mapa
  Este único error — olvidar ../ desde una subcarpeta — causa una gran parte de los informes de «imagen rota» en proyectos de principiantes. Si una imagen se rompe de pronto después de mover una página, comprueba primero si necesitas subir un nivel.

Rutas absolutas desde la raíz y URL completas

Una ruta absoluta desde la raíz empieza con / y se resuelve desde la raíz del sitio en un servidor web real, no desde la carpeta actual. Una URL completa incluye el protocolo y el dominio. Las URL completas son normales para archivos de terceros. Las rutas desde la raíz son útiles en sitios alojados cuando muchas páginas deben compartir una ruta estable.

Archivos locales frente a raíces alojadas

Cuando abres un HTML directamente desde el disco (file://…), a menudo no hay una raíz real de sitio web. Una ruta como /images/logo.png puede no coincidir con la carpeta de tu ordenador como lo hará en el servidor. Para la práctica local de principiantes, prefiere rutas relativas que coincidan con tus carpetas reales. Después del alojamiento, las rutas absolutas desde la raíz se vuelven más fiables entre páginas — porque el servidor conoce una raíz clara. Hasta entonces, la navegación relativa te ahorra frustración y adivinanzas.

Práctica: rutas a partir de un mapa de carpetas

La carpeta shop contiene:

• home.html
• una carpeta assets con hero.jpg
• una carpeta help con faq.html
  Haz esto en tu editor:

1. En home.html, añade un img que cargue hero.jpg con una ruta relativa.
2. En help/faq.html, añade un img que cargue el mismo archivo usando ../.
3. Desde faq.html, añade un enlace relativo de vuelta a home.html.
4. Abre ambas páginas en el navegador y confirma que la imagen y el enlace funcionan.
5. Rompe a propósito una ruta, actualiza, mira el fallo y corrígelo — esa retroalimentación entrena tu ojo más rápido que solo leer.
   Respuestas relativas esperadas para este mapa: assets/hero.jpg desde home.html; ../assets/hero.jpg y ../home.html desde faq.html. No copies rutas de memoria desde otra página: decide siempre desde la ubicación del archivo que estás editando.

Errores de ruta que rompen páginas

• Escribir images/logo.png desde una subcarpeta cuando la ruta correcta necesita ../images/logo.png
• Escribir mal el nombre del archivo o de la carpeta, o no coincidir mayúsculas y minúsculas en hosts que tratan Logo.PNG y logo.png como archivos distintos
• Usar \ de Windows en rutas web — en atributos HTML prefiere /
• Poner una ruta de disco como C:\site\img.png en src o href de una página web normal
• Copiar una ruta raíz /images/... en un proyecto que solo abres como archivo local y asumir que se comportará como un sitio alojado
• Enlazar a contact.html cuando el archivo en realidad vive en pages/contact.html
• Cambiar carpetas en el Explorador/Finder sin actualizar cada ruta que apuntaba al diseño anterior
  Cada uno de estos errores se siente «misterioso» hasta que revisas conscientemente el mapa de carpetas y el punto de partida del archivo actual. Entonces el fallo suele hacerse visible en segundos.

Resumen

• Las rutas de archivo dicen al navegador dónde viven los archivos vinculados para src, href y atributos similares
• Las rutas relativas se resuelven desde la carpeta del archivo HTML actual
• ../ sube una carpeta en una ruta relativa; úsalo cuando el objetivo está por encima del archivo actual
• Las rutas absolutas desde la raíz empiezan con /; las URL completas incluyen protocolo y dominio
• Ajusta el estilo de ruta a tu diseño: relativa para práctica local del proyecto, raíz/URL cuando el modelo de alojamiento las necesita
• Las rutas rotas son una de las causas más comunes de que imágenes y enlaces fallen «misteriosamente»
• Decide siempre la ruta desde el archivo que estás editando, no desde el recuerdo de otra página