🎓 A1Learner
🔍

HTML File Paths

A file path is the written address of a file for a browser. Paths appear as href values and src values.

A file in the same folder

The path is just the file name. The two files sit in the same folder.

<a href="contact.html">Contact page</a>

A file in a subfolder

A subfolder is a folder inside the current folder. The path names the folder, a slash, then the file.

<a href="pages/about.html">About page</a>

A file one folder up

The two dots mean the folder above the current folder. The path steps up first, then names the file.

<a href="../index.html">Home page</a>

A path from the root

The root is the top folder of a site. A path that starts with a slash starts at the root.

<a href="/pages/about.html">About page</a>

A full web address

An absolute path is a full web address. It works from any page on any site.

<a href="https://example.org/pages/about.html">Partner about page</a>

Example

<!DOCTYPE html>
<html>
<head>
<title>Path Demo</title>
</head>
<body>
<h1>Path Demo</h1>
<p><a href="guide.html">Guide in this folder</a></p>
<p><a href="docs/manual.html">Manual in a subfolder</a></p>
<p><a href="/index.html">Home from the root</a></p>
</body>
</html>

Key points

  • File path: the written address of a file
  • Relative path: a path written from the location of the current file
  • Root-relative path: a path that starts at the root folder of a site
  • Absolute path: a full web address for a file
  • Use ../ at the start of a path to step up one folder
  • The same path forms work in href values and src values.

In this example, each link uses a different kind of path. The first path is a plain file name for the same folder. The second path steps into a subfolder named docs. The third path starts with a slash, so it starts at the site root. The link text on the page names each kind.

Note

A wrong folder name breaks a path, even when the file name is right.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which path starts at the root folder of the site?