Absolute versus Relative Links - HTML

There are two types of URL styles, and therefore two link types, that you need to understand: absolute and relative. You have seen absolute links, where the URL used in the link provides the full path, including the protocol and full server address. These links are called absolute links because the URL itself is absolute—that is, it does not change no matter where the document in which it appears is kept.

The other type of link, a relative link, does not provide all of the details to the referenced page; hence, its address is treated as relative to the document where the link appears. Relative links are only useful for linking to other pages on the same Web site, because any reference off of the same site requires the remote server’s name. It’s easier to understand the difference between the two types of links with an example. Suppose you are the Webmaster of example.com. You have several pages on the site, including the home page, a main products page, and hardware and software products pages.

The home page is in the root directory of the server, while the product pages (all three) are in a products directory. The relative links back and forth between the pages.

Relative links to subpages.

Relative links to subpages.

Note that you can use directory shortcuts to specify where the pages are:

  • Starting a directory with a slash (/) references it as a subdirectory of the root directory.
  • Starting a directory with a period and a slash (./) references it as a subdirectory of the current directory (the directory where the current page resides).
  • Starting a directory with a double period and a slash (../) references it as a parent directory to the current directory.

Relative links to parent pages.

Relative links to parent pages

Relative links are easier to maintain on sections of Web sites where the pages in that section never change relationships to one another. if the products pages move as a whole unit to another place on the site, the relative links between the product pages won’t change. If the links were coded as absolute they would have to change


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics