Paths and URLs; relative and absolute

General introduction or…

If all you care about is paths and URLs, skip to the next section. ;)

Still here? Awesome. This is the first in my “Learning web development” series of blog posts, inspired by a friend I have who’s interested in learning web development. He and I have been meeting up and running over a few things, and I thought it would be nice to complement our personal meetings with a few blog posts (which I hope will have value for anyone interested in learning how to develop web sites).

While I didn’t intend on beginning with paths and URLs, this is where we’re starting, since my friend encountered a problem. After setting him up with some books and a local dev environment (XAMPP), he created an awesome tomatillo sauce recipe page. However, when he moved his site from localhost to the test web server, all the paths broke! Which leads us to…

What is a path? Why is this something developers should care about?

A path is simply the location of a file or directory within a file system,1 though it’s not exactly an address. A path is both the location and how to get there (if this definition seems complicated, hopefully a few examples (coming shortly!) will clear things up). The reason that web developers need to understand paths is because the web is about URLs (such as, and URLs are primarily paths. This is evident in the URL syntax: scheme://domain:port/path?query_string#fragment_id.2

The domain part of the URL maps to the IP address of a remote computer. When accessing that remote computer using a given scheme (HTTP) and port (by default, 80), you are accessing a portion of the remote computer’s file system. The layout of this accessible portion of the file system corresponds to the path part of the URL.

For the remainder of this post, we’ll use the fictional “” as an example. has the following directory structure on their web host:

/ (The web root)

When a user navigates to in their browser, they are accessing the above file system and the web server “serves” them index.html. If a user wanted to download the example.pdf, they would navigate to

Types of paths

There are two ways to specify a path: absolute or relative. Absolute paths are a bit simpler, so we’ll start with them.

Absolute paths

An absolute path gives the location of a file or directory in reference to a root directory. For (as for all websites!), the root directory is the web root (or /). Let’s look at some examples.

Given, we’d like /index.html to include a link to the styles.css file. Using absolute syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="/css/styles.css">.

If you wanted to add the header.png image to /index.html using an absolute path, it would look like this: <img src="/img/header.png">.

Let’s look at a few more examples of absolute paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="/files/example.pdf">. And we’ll add a link to the styles.css in the head: <link rel="stylesheet" href="/css/styles.css">.

Note that all of the absolute paths start with /. Basically, you can always combine a domain ( with an absolute path to get a fully qualified URL.

Speaking of fully qualified URLs, that’s the alternative way of writing an absolute path: <link rel="stylesheet" href="">. I don’t recommend it, though.

Relative paths

A relative path is a path to a given file or directory starting from another file or directory. To make this simple, we’ll look at several examples.

Given, we’d like /index.html to include a link to the styles.css file. Using relative syntax, we’d add a link element to the head like this: <link rel="stylesheet" href="css/styles.css">. This translates to “look in the css directory that is in the same directory as index.html and get the styles.css file from there.” Note: the difference between this relative path and the absolute one is the omission of the leading /.

If you wanted to add the header.png image to /index.html using a relative path, it could look like this: <img src="img/header.png">. It could also look like this: <img src="./img/header.png">. . is a “special character” when used like this. It means “start at the current directory.”

Let’s look at a few more examples of relative paths. Using /files/index.html, let’s create a link to the example.pdf: <a href="example.pdf"> (or <a href="./example.pdf">). So far, so good. Now let’s add the styles.css in the head. Uh oh. So far, we’ve always looked in the current directory or down. How to go up?

.. is the “special character” to go up one directory. So, back to our example. To add styles.css in the head of /files/index.html, you’d use the path ../css/styles.css. To go up two directories, use ../../. Three directories: ../../../. Etc.

Which should I use? Relative or absolute? Or… does it matter?

Given the ability to link to files using a relative or absolute path or a fully qualified URL, does it matter which one we use?

For the end user, not really. I’ve seen some articles that make some strange claims about performance (such as local absolute paths go through DNS, but relative paths don’t!) and SEO benefits, but the only practical difference is a few bytes saved by using relative paths. I created a test page to demonstrate the lack of difference at

The primary reason to prefer one to another is for the benefit of the web developer! For instance, relative links make it very easy to move “chunks” of a site from one location on a web server to another without having the links break. As long as the chunks maintain their relative structure, they can be moved to any subdirectory at will.

The primary disadvantage to using relative links shows up when you start creating larger, more dynamic sites. Each subdirectory of the site requires a different relative path to get at common assets (such as style sheets or images). Since large, dynamic sites typically have a shared header file, it makes more sense to use absolute links.

Both relative and absolute paths make it easy to work on a site locally and then move the files to a remote web server. With relative paths, the local site structure doesn’t need to match the remote one; with absolute paths, it does. (You’ll also need to run a web server locally to use absolute paths, but that’s also a necessity to run a dynamic site locally.)

The previous paragraph hints at the reason why I don’t recommend using fully qualified URLs—without manipulating DNS entries (with hosts ,for example), it’s impossible to work locally. The local files will always point to the remote server!

Any questions?

Thus concludes my first “Learning Web Development” post. If you have questions, please post them as a comment below. Actually, any feedback would be appreciated. Did you find this post useful? Or too much?



  1. “Path (computing).” (n.d.). In Wikipedia. Retrieved 15 June 2013, from
  2. “Uniform resource locator.” (n.d.). In Wikipedia. Retrieved 15 June 2013, from

14 thoughts on “Paths and URLs; relative and absolute

  1. Pingback: Should I Change My Relative Links to Absolute Links for SEO Purposes? | Square Root Interactive Blog

  2. Pingback: Week 6: Anchor Tags and paths | tylerwyrostek

  3. Pingback: seo html

  4. Pingback: Should I Change My Relative Links to Absolute Links for SEO Purposes? | Square Root Interactive

  5. Thank you! You’ve clarified something for me that I *thought* I understood but didn’t, actually :-) Hopefully, now I do.

  6. That’s one very common mistake done while moving from XAMPP to Ubuntu server. You addressed it very well. It is impossible to change thousands of links once you get it wrong.

  7. Very nicely written article. One benefit of absolute path is in situations where the author dynamically creates contents e.g. by combining files or html in locations such as a div which exists on another page.

  8. OMG I have been misled by stupid comments such as “If that file path is relative (meaning that it doesn’t start with http://),…” and I did not realise absolute paths could be defined from the domain root with a single slash. This way I can use absolute addresses in my menubar links but still have the same menu in both the development site and the live site THANK YOU!

  9. Unless you are dealing with Sub or AddOn domain names. Then it get near impossible for me to understand how they work and under what conditions.
    For example it seems to differ when you are using s, hrefs and php includes.

Leave a Reply