Different types of hyperlinks

There are three types of links that can be used in a web page: relative, and site root relative, and absolute.  Which one is correct to use depends on the location of the page to which it links.

A relative link points to a location that is relative to the current page.  Having a link to “index.html” is a relative link that points to the “index.html” page in the same directory as the current page.  Links can also be made to “../index.html” to go to “index.html” in the parent directory.  You can also use links like “../images/mypic.jpg” to find an image in the images directory inside the parent directory of the current page.

The disadvantage of using relative links is that the link can break if you move a file to another directory and thus change the relative position of the link’s destination.  If you move the file from within Expression Web, however, it will automatically fix all relative links for you (as long as you have site metadata turned on).

Expression Web uses relative links as the default when creating a new hyperlink.

A site root-relative link points to a location that is relative to the root directory of the site.  They begin with a slash “/”.  Having a link to “/index.html” is a site root-relative link that points to the “index.html” page in the root directory of the site.  One common use of this is to have all images in an images directory and then to link to images with links like “/images/mypic.jpg”.

The advantage of doing this is that the link stays the same no matter what directory the current page is in.  This is also frequently used for linking in CSS files.

Expression Web started fully supporting site root-relative links in Version 3, Service Pack 1.  Starting in that version, pages with site root-relative links are shown correctly in the design view.  Expression Web will also correctly fix your links if you move a file that is linked to with a site root-relative link if you move the file within Expression Web (again, as long as you have site metadata turned on).

Note that you may get unexpected results when you use Preview in Browser from within Expression Web.  This is because your browser shows your page from a local file – something like “C:\Users\myName\Documents\My Web Sites\mysite\index.html”.  For a site root-relative link, your browser doesn’t know which directory to use for the site’s root so it will simply use “C:\”. 

There is a simple solution to this problem, though.  In the Site menu of Expression Web, open up Site Settings and click on the Preview tab.  Make sure “Use Microsoft Expression Development Server” is checked, select “For all web pages”, and hit OK. 

Now when you hit Preview in Browser, it will use an https://localhost address that has the site’s root set correctly and your site root-relative links will work correctly in your browser.

An absolute link is simply one that includes the entire path to the file like “https://www.contoso.com/news/index.html”.  These are generally used for links that need to point to a different site than the one on which your page is located.

Expression Web supports these links as well.



Todd Moscinski, Senior Software Development Engineer

Microsoft Expression Web