Partager via

Different types of hyperlinks

  • Article

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.

toddmo_49351105062009

 

Todd Moscinski, Senior Software Development Engineer

Microsoft Expression Web

Comments

  • Anonymous
    October 08, 2010
    root relative doesn't seem to work with the webbot include.

  • Anonymous
    October 25, 2010
    <a href="www.unifiednetent.com/>SEARCH ENGINE OPTIMIZATION</a>Unified-Net Enterprises LLC : Provides customized world-class professional services for Fayetteville web design, website development, website maintain,website promotion, seo service, search engine optimization. <a href="www.unifiednetent.com/>Fayetteville web design</a>

  • Anonymous
    July 04, 2011
    what is then the virtual hyperlink, relative and absolute hyperlink. tell me in a simplest form as i m a student of grade 8.

  • Anonymous
    December 06, 2012
    Good info. My problem is that when I do a hyperlink it puts in a absolute path.. file://webserver/root/folder/page.html So how do I change it to only use Site Root-Relative Links..? Thanks,       Tim

  • Anonymous
    September 27, 2013
    i would like to know more about different types of hyperlinks

  • Anonymous
    October 26, 2013
    it was s useful article for my exam preparartion.

  • Anonymous
    November 21, 2013
    is this the fully information in hyperlinks

  • Anonymous
    August 16, 2014
    What types of HyperLink in short answer plz?

  • Anonymous
    November 03, 2014
    i want the kind of links not the types

  • Anonymous
    December 09, 2014
    When I insert an image, the link text in code view points to the path on my local machine like this ### src="file:///C:/my_sites/images/picture1.jpg" ###.  How do I make expression web make link text in code view point to a relative path within my site like this ### src="/images/picture1.jpg" ###

  • Anonymous
    December 30, 2014
    It was a very useful article for the preparation of my project Thanks for providing me the best info.

  • Anonymous
    April 08, 2015
    no es tan bueno por que no sale lo que uno kiere

  • Anonymous
    June 27, 2015
    good thks i needed it for my school project.

  • Anonymous
    February 18, 2016
    Thanks for the awesome post it explains everything in detail. brazzershackfree.blogspot.com