Rutas de archivos HTML

Una ruta de archivo define la ubicación de un archivo en la estructura de carpetas de un sitio web.

Una ruta de archivo se utiliza cuando enlazamos a archivos externos como:

Existen rutas de archivo absolutas y relativas.

Rutas de archivo absolutas

Una ruta de archivo absoluta es la URL para acceder a un archivo de Internet.

Ejemplo de una ruta de archivo absoluta:

Ejemplo de una ruta de archivo absoluta

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Absolute File Path Example</h2>
    <img src="https://www.slrlounge.com/wp-content/uploads/2019/11/Sea-Thru-Underwater-Photography-Algorithm-SLR-Lounge_0001-1000x675.jpg" alt="Sea" style="width:300px" />
  </body>
</html>

Try it Yourself »

Rutas de archivo relativas

Una ruta de archivo relativa hace referencia a un archivo que es relativo a la página actual. En el ejemplo a continuación, la ruta es relativa a la raíz (comienza con /), apuntando a un archivo en la carpeta images en la raíz del sitio web:

Otras rutas relativas comunes incluyen ./file.html (mismo directorio) y ../folder/file.html (directorio padre).

Ejemplo de una ruta de archivo relativa:

Ejemplo de una ruta de archivo relativa

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Relative File Path Example</h2>
    <img src="https://es.w3docs.com/build/images/smile-small.jpg" alt="Smile" width="290" height="260" />
  </body>
</html>

Try it Yourself »

Práctica

¿Cuáles son los tipos de rutas de archivo en HTML?

Rutas de archivo absolutasRutas de archivo localesRutas de archivo relativasRutas de archivo virtuales

Rutas de archivos HTML ​

Rutas de archivo absolutas ​

Ejemplo de una ruta de archivo absoluta: ​

Rutas de archivo relativas ​