Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Mark Gonzales
Mark Gonzales
3,423 Points

Source URL's Relative vs Absolute

Hi everyone, I'm currently making my way through the HTML and CSS courses as a refresher before I move on to JS, jQuery and other programming and I noticed you guys use relative url's (../img/file.png) for everything. I've read that absolute (/img/file.png) works well for moving pages around. For example, if you ever decide to move a page to a sub directory, you only need to update navigation links and not every link to an image on said page. But then I've also read that relative works well if, say, you move around your assets directories into a sub directory, or wherever, and it won't break your images called via CSS so long as the relative paths stay the same.

I would assume in a real life senario, you wouldn't be moving directories and pages around much (unless it's a redesign, in which case, it wouldn't matter) so I'm just curious if there's any benefit to one vs the other, or if it's just personal preference.

1 Answer

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

Here are a few thoughts:

(1) You have to use relative paths if you are editing files locally without installing web server software on your computer.

(2) Addresses like

/img/file.png

are not technically absolute. An absolute address would be like 

http://teamtreehouse.com/img/file.png

The format you are using is known as root-relative because they are relative to the root of the web server.

(3) Relative paths make the whole site more portable, so you could develop in a subfolder on a local web server like --

localhost/sitename/index.html

-- and then easily move it up a directory in the production server like --

myawesomedomain.com/index.html

(4) If you are building a dynamic website, relative paths are really hard to use in shared code files like a navigation file. The relative link to a page completely depends on which page it's in. So imagine you have these two pages:

products/index.html
products/shirts/mike-the-frog.html

Then a relative link back to the contact form would need to be this on the products page --

../contact.html

-- but this on the shirt detail page --

../../contact.html

You can't share the code as easily with relative links, but a link like this would work from either page.

/contact.html

With those points in mind, here's what I would recommend for references in HTML files:

  • If you are building a static site without any server-side code like PHP, Ruby, Python, etc., then use relative links.
  • If you are building a dynamic site with some server-side code, use root-relative or absolute links.

For CSS files, though, I would always use relative links to get images. My CSS folder structure will look something like this --

css/
css/img/
css/styles.css
css/img/file.png

-- and I would always reference them relatively. Even if your site is using server-side code to generate the HTML, it's not generating the CSS files.

What do other people do?