HTML File Paths

The position of a file in the folder structure of a website is described by its file path.

A file path indicates the file location in the folder structure of the website.

When connecting to external files, file paths like :

  • Web pages
  • Images
  • Style Sheets
  • JavaScripts
You can also search for these topics, html file paths explained, html file paths not working, root link, browse absolute path, default, html file paths display, find, found.

HTML File Paths Example :-

Path Description
"picture.jpg" The file "picture.jpg" is in the same directory as the current page.
"images/picture.jpg" The "pictures.jpg" is in the images folder in the current directory.
"/images/picture.jpg" The file "picture.jpg" can be found in the folder of images at the root of the website.
"../picture.jpg" In the one level folder up of the current file is stored the "picture.jpg" file.

You can also search for these topics, html file path examples advantages and disadvantages, absolute path vs relative path, create simple path, definition, from input.

Absolute File Paths

The entire URL in a file is an absolute file path:

<!-- Locate an image -->
<img src="https://www.simmanchith.com/favicon.png" alt="icon">

<!-- Locate a page -->
<a href="https://www.simmanchith.com/tutorial/html/html-introduction.aspx">Html Tutorial</a>

<!-- Locate a page from different site -->
<a href="https://www.google.com/">Visit Google</a>

The above example contains three types of filepaths, which is:

  • Locate an image
  • Locate a page
  • Locate a page from different site
You can also search for these topics, html absolute file paths location, html local file absolute paths, how to get and find html absolute file paths load.

Relative File Paths

On the current page, a relative path for the file points to a file.

Example

<!-- The file path shows a file within the html-resources folder of the web's root folder. -->
<img src="html-resources/img-computer.jpg" alt="Mountain" style="width:300px">

<!-- The file path shows a file within the html-resources folder of the current document. -->
<img src="html-resources/img-computer.jpg" alt="Mountain" style="width:300px">

<!-- The file path in the following example points to a file, which is one level up from the current folder. -->
<a href="../php/php-introduction.aspx">Php Tutorial</a>

<!-- The file path in the following example points to a file in the root folder, which is two level up from the current folder. -->
<img src="../../favicon.png" alt="icon">

The above example contains four types of filepaths, which is:

  • The file path shows a file within the html-resources folder of the web's root folder
  • The file path shows a file within the html-resources folder of the current document
  • The file path in the following example points to a file, which is one level up from the current folder
  • The file path in the following example points to a file in the root folder, which is two level up from the current folder
You can also search for these topics, html ralative file paths example, ralative filepaths not working, basic, browser, definition, found, find, html relative file paths folders up one level, html realtive file paths give.

Best Practice

Use relative file paths whenever possible (if possible).

Your websites are not linked to your current basic URL when you use relative file paths. All links will work on your own computer (localhost), your public domain, and future domains.