HTML Paths

Learn how to use file paths in HTML

Menu

HTML File Paths

File paths are used to specify the location of files in HTML. Understanding file paths is crucial for linking to external resources like images, stylesheets, and other HTML pages.

Absolute Paths

An absolute path provides the full URL to a file:

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

Relative Paths

Relative paths specify the location of a file relative to the current page:

<img src="images/picture.jpg" alt="Description"> // File in images folder in current directory
<img src="../images/picture.jpg" alt="Description"> // File in images folder one directory up

Root-Relative Paths

Root-relative paths start with a forward slash and are relative to the root of the website:

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

Best Practices

  • Use relative paths for files within your own website to make it easier to move your site to a different domain.
  • Use absolute paths when linking to external resources.
  • Be consistent with your path structure to avoid confusion.
  • Double-check your paths to ensure they are correct and the files exist in the specified locations.

Understanding and using file paths correctly is essential for creating well-structured and functional HTML documents.