HTML - File Paths

In HTML, file paths are used to specify the location of external files, such as images, stylesheets, scripts, or other HTML documents. There are three types of file paths commonly used:

Relative File Paths:

  • A relative file path specifies the location of a file relative to the current web page.
  • Relative file paths are often used when referencing files within the same website or directory structure.
  • Examples:
    • image.jpg (refers to a file named "image.jpg" in the same directory as the current web page)
    • ../styles/style.css (refers to a file named "style.css" in the "styles" directory, one level above the current directory)

Absolute File Paths:

  • An absolute file path specifies the complete URL or file path from the root of the website or file system.
  • Absolute file paths are used when referencing files outside the current directory or website.
  • Examples:
    • /images/logo.png (refers to a file named "logo.png" in the "images" directory at the root of the website)
    • C:\Documents\file.txt (refers to a file named "file.txt" located at the specified file path on the local file system)

Root-Relative File Paths:

  • A root-relative file path is similar to an absolute file path but starts from the root directory of the website.
  • It is commonly used in server-side scripting languages.
  • Example:
    • /images/photo.jpg (refers to a file named "photo.jpg" in the "images" directory at the root of the website)

When specifying file paths in HTML, they are typically used in attributes like src, href, or import. It's important to ensure the file path is accurate and accessible from the location where the HTML file is being served.

Remember to use the appropriate file path type based on your specific scenario, whether it's relative, absolute, or root-relative, to correctly reference external files in your HTML documents.