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>
- 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>
- Linking to file in a parent directory:
code in b.html, linking to a.html
<a href="../a.html">Link label</a>
- Linking to file in a subdirectory:
code in a.html, linking to b.html
<a href="XXX/b.html">Link label</a>
- absolute URL:
<a href="http://www.apache.org/foundation/FAQ.html">Apache Software Foundation FAQ</a>
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. |