Obvious In Hindsight
Archive of tips, tricks and solutions for designers and programmers!

Web Design: Absolute paths, document relative and root relative paths


A path, in effect, is like a postal address. Paths generally lead to a file (e.g. image) or a folder (e.g. directory).

Web root vs. document root

A web root is the upper most layer of your website in which all files and subdirectories are stored. Generally this is where the home page is stored.

http://www.somesite.com

A document root is relative to the location of the document.

http://www.somesite.com/somefolder/somefile.html

Note: A document root and web root can be one and the same if the document is located in the web root. Both web roots and document roots can be defined either absolutely or relatively.

Absolute path vs. relative path

An absolute path is simply a complete path and always starts from the web root.

http://www.somesite.com/images/apple.jpg

A relative path is simply a short hand version of the absolute path. Usually you’re simply omitting the scheme (http), host (www), domain (www.somesite.com) and port (com). There are two ways of defining a relative path.

Document relative path

A document relative path is the more common type of relative paths. It’s important to note that there is no preceding forward slash.

images/apple.jpg

Such a path allows you to freely move up and down your sites hierarchy by adding “../” before the document relative path.

<img src=”../images/apple.jpg”>

The path becomes relative to the root above the document realtive path for every “../” added. The following will jump up three roots for example:

<img src=”../../../images/title.jpg”>

Root relative paths

A root relative path is relative to the web root where your overall home page resides. Such a path is useful for files that are to be universally included across an group of or all of your web pages (e.g. a header). A document relative path will not work if the location of the documents (web pages) vary. For this reason, the universality of the root relative path will do the trick. It’s important to note that there is no preceding forward slash.

<img src=”/images/title.jpg”>

The preceding forward slash matters!

It’s critical to understand that a preceding forward makes the difference between a document relative path and a root relative path.

Everything’s obvious in hindsight, eh?

Advertisements

No Responses to “Web Design: Absolute paths, document relative and root relative paths”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: