Ruta de archivo HTML

Ruta Descripción
<img src="picture.jpg"> picture.jpg se encuentra en el mismo directorio que la página web actual
<img src="images/picture.jpg"> picture.jpg está ubicado en la carpeta images del directorio actual
<img src="/images/picture.jpg"> picture.jpg se encuentra en la carpeta images del directorio raíz del sitio actual
<img src="../picture.jpg"> picture.jpg se encuentra en la carpeta superior de la carpeta actual

Ruta de archivo HTML

La ruta del archivo describe la ubicación de un archivo en la estructura de carpetas del sitio web.

La ruta del archivo se utiliza al enlazar archivos externos desde enlaces:

  • Página web
  • Imágenes
  • Hoja de Estilo
  • JavaScript

Ruta de archivo absoluta

La ruta de archivo absoluta es una URL completa que apunta a un archivo de Internet:

Ejemplo

<img src="https://www.codew3c.com/images/picture.jpg" alt="flower">

El etiqueta <img> y las propiedades src y alt se explican en el capítulo de Imágenes HTML.

Ruta relativa

Las rutas relativas apuntan a archivos relativos a la página actual.

En este ejemplo, la ruta del archivo apunta a un archivo en la carpeta images del directorio raíz del sitio web:

Ejemplo

<img src="/images/picture.jpg" alt="flower">

En este ejemplo, la ruta del archivo apunta a un archivo en la carpeta images de la carpeta actual:

Ejemplo

<img src="images/picture.jpg" alt="flower">

En este ejemplo, la ruta del archivo apunta a un archivo en la carpeta images del directorio superior de la carpeta actual:

Ejemplo

<img src="../images/picture.jpg" alt="flower">

Buena práctica

Es una buena práctica usar rutas relativas (si es posible).

Si se utiliza una ruta relativa, su página web no se bindirá con la URL de base actual. Todos los enlaces funcionarán en su computadora (localhost) o en dominios públicos futuros.