It is best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains. —HTML File Paths (w3schools)
Basic Terminology
Current Working Directory This is where the calling process is at the time of the call;
Parent Directory an immediate ancestor
Sub-directory (Child Directory) an immediate descendant
Pathname
  • A pathname is a location of any specific file.
  • A full pathname contains all the branch directories between the root and the specific file.
Absolute pathnames
Absolute pathname declares the path starting at the root directory and declaring each directory on the path.
  • start with the root directory
  • always start with a slash /
  • the absolute pathname to some object is always the same.
Relative pathnames
Relative pathname declares the path in relation to your current position. It does not contain / as the first character.
  • start with your current directory
  • never start with a slash
  • the relative pathname to some object depends on your current directory

Syntax:   <a href="path/file.html">Link label</a>

  1. Linking to file in a same directory (current directory is XXX): code in b.html, linking to c.html
    <a href="c.html">Link label</a>
  2. Linking to file in a parent directory: code in b.html, linking to a.html
    <a href="../a.html">Link label</a>
  3. Linking to file in a subdirectory: code in a.html, linking to b.html
    <a href="XXX/b.html">Link label</a>
  4. absolute URL:
    <a href="http://www.apache.org/foundation/FAQ.html">Apache Software Foundation FAQ</a>
browser-page-load-timeline

Navigating directory tree

Path What it means…
<a href="tips/page.html"> page.html is located in a directory called tips. The file containing this code is located in the current directory.
<a href="tips/other/page.html"> page.html is located in a directory called other that is located in a folder called tips that is located in the current directory.
<a href="../../page.html"> page.html is located in a directory two levels up from the current directory.