Curso de HTML

Construye la estructura de la web.

Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.

Rutas relativas y absolutas

Casi todos los errores de "la imagen no carga" o "el enlace no funciona" vienen de una ruta mal escrita. Entender cómo se resuelven te ahorra ese dolor de cabeza.

Cargando editor...

Resultado

Preparando resultado...

Estas rutas son solo de ejemplo (no llevan a páginas reales dentro de este playground); fíjate en la diferencia de símbolos entre cada una: https://, /, ./ y ../.

Explicación

Existen tres formas de escribir una ruta en href o src:

./archivo.html

Relativa: busca el archivo en la misma carpeta donde está el HTML actual.

../carpeta/archivo.html

Relativa: sube un nivel de carpeta antes de buscar. Cada ../ adicional sube un nivel más.

/ruta-desde-la-raiz.html

Relativa a la raíz: siempre empieza desde la raíz del sitio, sin importar en qué carpeta esté el archivo actual.

https://ejemplo.com/pagina

Absoluta: la dirección completa de otro sitio (o del propio), funciona desde cualquier lugar.

Reto rápido

Este enlace tiene un ../ de más y apunta a una carpeta que no existe. Quítale un nivel para que suba solo una carpeta.

En esta lección

Ejemplo interactivo
Explicación de cada etiqueta
Cuándo usarlo
Errores comunes

Consejo

Si mueves tu archivo HTML a otra carpeta, las rutas relativas dentro de él pueden dejar de funcionar; una ruta relativa a la raíz o absoluta no se ve afectada.

Dato extra

Una ruta relativa se resuelve según dónde vive el archivo HTML que la contiene, no según dónde está el archivo al que apunta.

Error común

Usar una ruta absoluta del propio computador (como "C:\Usuarios\tú\foto.png"), que solo funciona en esa máquina; o poner de más o de menos ../ al subir de carpeta.

Siguiente paso

Terminaste el módulo de enlaces e imágenes. El siguiente módulo trata sobre cómo organizar el contenido de una página con divs, spans y etiquetas semánticas.

Ir a la siguiente lección