Relative Path
Definition
A relative path is a reference resolved against the URL of the document doing the referencing. Write src="img/logo.png" in a page served at /guides/dns/ and the browser asks for /guides/dns/img/logo.png; write it in a page at the site root and the browser asks for /img/logo.png. Two dots step up a level, so ../fonts/inter.woff2 from /guides/dns/ resolves to /guides/fonts/inter.woff2. The key property is that a relative path describes a relationship between two files rather than a position on a domain, so moving the whole folder somewhere else keeps every link intact. That is the opposite of an absolute path, which always starts at the root and therefore depends on where the site is published. Relative paths are what let the same folder work when opened from your desktop, previewed from a sub-folder, and published at a domain of its own.
Why It Matters
Path style is the most common reason a site that is perfect on your laptop is broken the moment it is published — unstyled text, missing images, scripts that never run, and a console full of 404s. The failure is easy to misread as a corrupted upload, because the HTML arrives fine and only the things it references are gone. Relative paths survive the move; they cost nothing and remove the whole class of problem from a static site. A site with forty images and a leading slash on each one produces forty broken requests from a single wrong character repeated.
How It Works
The browser resolves every path against the current document's URL before making a request. For a page served at /guides/dns/index.html the base is /guides/dns/, so logo.png becomes /guides/dns/logo.png and ../logo.png becomes /guides/logo.png. Change the URL to /guides/dns — the same file without the trailing slash — and the base becomes /guides/, so the identical markup now asks for /guides/logo.png instead. That single character is why a site can break when a host starts serving folder URLs with a slash, and why linking to /guides/dns/ rather than /guides/dns is worth being deliberate about. A base element in the head overrides the rule for the whole document, which is occasionally useful and more often a trap. Filenames resolve case-sensitively on Linux hosts, so img/Logo.PNG and img/logo.png are two different requests even though macOS and Windows treat them as one.
Real-World Example
Someone exports a portfolio from a design tool and uploads it to 99helpers, where it goes live at rk-folio.99helpers.site as a wall of unstyled text. The stylesheet is referenced as /assets/style.css, which pointed at a real file while the folder was open on the desktop but now depends on the site root being exactly where the tool assumed. Changing that one reference to assets/style.css and re-uploading brings the design back — same files, same host, one fewer slash.
Common Mistakes
- ✕Adding a leading slash out of habit — /assets/style.css is no longer relative, and it breaks the moment the site is served from anywhere but the domain root
- ✕Mixing slash styles across a project — half the pages then work and half do not, which sends people hunting for a server problem that does not exist
- ✕Ignoring the trailing slash when linking between folders — /guides/dns and /guides/dns/ resolve every relative reference on the page differently
Related Terms
Absolute Path
An absolute path starts at the root and ignores which page is doing the linking — /assets/style.css, or a full URL like https://example.com/assets/style.css. Where the file sits relative to the current page makes no difference.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Static Site
A static site is a website made of finished files — HTML, CSS, JavaScript, images — that are sent to the browser exactly as they are stored. Nothing is assembled on the server when a visitor arrives.
Public URL
An address that serves its content to anyone who requests it, with no sign-in, token or password. Having the address is the only requirement.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →