HTML File Paths

Why the path matters

src and href are instructions to fetch another file: an image, a stylesheet, a second page, a script. If the path is wrong, you get a broken image, a page with no CSS, or a link that 404s. The tag can be perfect. The address still has to point at a real file.

There are three common kinds of path: relative to this file, relative to the site root, and a full URL on the web.

Same folder and a subfolder

A path with no leading slash is relative to the HTML file you are in. cat.jpgmeans “the file named cat.jpg next to this page”. images/cat.jpg means “go into theimages folder beside this page, then take cat.jpg”.

<!-- page.html and cat.jpg sit in the same folder -->
<img src="cat.jpg" alt="A grey cat">

<!-- page.html sits beside a folder named images -->
<img src="images/cat.jpg" alt="A grey cat">
<a href="images/gallery.html">Photo gallery</a>

Relative paths move with the folder. If you keep page.html and images/ together, the picture still works when you copy the project to another computer.

From the site root

A path that starts with / is root-relative. It starts at the root of the site, not at the current file. /images/cat.jpg always means “images/cat.jpg at the top of this site”, whether the HTML file lives in / or in /menu/lunch/.

<!-- From any page on the same site -->
<img src="/images/cat.jpg" alt="A grey cat">
<link rel="stylesheet" href="/css/site.css">
<a href="/about.html">About</a>

Root paths are handy on a real website with a header reused on every page. They are awkward if you open the HTML file directly from disk (file://), because there is no site root — only a folder. For local files, prefer relative paths.

Absolute URLs

An absolute path includes the scheme and host: https:// and the domain. Use it for files that do not live in your project: a CDN stylesheet, an image on another site, or a link to someone else’s page.

<a href="https://studygrid.example/html/intro">HTML intro</a>
<img src="https://example.com/images/cat.jpg" alt="A grey cat">
<script src="https://example.com/js/tiny.js"></script>

Absolute URLs do not care which folder your HTML sits in. They do depend on the network and on the other host staying up. For your own images, keep files in the project and use a relative path.

One folder up with ..

.. means the parent folder. From pages/menu.html, ../images/cat.jpggoes up to the project folder, then into images.

<!-- File: pages/menu.html -->
<img src="../images/cat.jpg" alt="A grey cat">
<a href="../index.html">Home</a>
<link rel="stylesheet" href="../css/site.css">

Stack them if you must: ../../logo.png goes up two folders. Deep ../ chains are hard to read. A flatter folder tree, or root-relative paths on a server, stays clearer.

Path types at a glance

When a file does not load

• Check the filename and folder. Open the path in the browser or in your editor.
• If you used /images/..., confirm you are on a server with a real site root.
• If you used ../, count the folders from the HTML file, not from the project root.
• For images, keep alt so a missing file still has a text fallback.

The StudyGrid editor at /html/try is a single preview document. Relative files on disk are not sitting next to that preview unless you paste a full https:// URL. Use absolute example URLs there, or tiny inline SVG, when you want a picture to show in the live pane.

Next: the head — charset, viewport, title, and where those stylesheet paths usually go.