If you're building a website directly on your computer,

with the web files stored on your hard drive, the document relative path we've

been using are the best because you can open a webpage in the browser for

example directly off your desktop, or home directory.

And all of the images and links appear and work fine.

However, there's another type of path called a root relative path,

that's commonly used by developers who are testing their sites directly on the web.

Workspaces actually creates a simple web server each time you preview a page.

So you can use root relative paths in the pages we're building here.

Root relative paths begin with a forward slash,

followed by a file or directory name.

And the forward slash indicates the root of the project.

So for example, if I change the home link in articles.html from ../../index to

just a /,

the link navigates to the root of the site which loads index.html by default.

So now let's go back and change the other URLs in the NAV from document

relative to root relative paths by replacing the ../'s with just the /.

And even though the article.html file is nested two folders deep,

the root relevant links like About, Articles and Contact,

navigate back to index.html, and the specified sections of the page.

So this is the best part about using root relative paths.

Since the forward slash always refers to the root folder of the site,

the URLs can remain the same for every web page.

They will work even when pages are located in folders and sub folders like this.

So for example we can change the path of our image to a root relative path.

And the image still appears on the page.

Keep in mind that root relative links work only when a website is uploaded

to a web server or when you have a local web server running on your computer.

Now a local server is a simple web server that runs on your computer.

And to access the site you're building,

you don't open the file using the File > Open menu in the browser.

Instead, you type in a URL, usually using an IP address,

which then points to a folder on your computer.

I've added a link to a really simple server you can use with Chrome,

if you wanna use root-relative links when building and

saving pages directly on your computer.

Just keep in mind, if you're working with files that are on your local computer and

don't have a local web server running,

root relative links like this will not work.

So coming up in the next video,

you'll learn useful features a elements provide for composing emails.