HTML and CSS Reference
In-Depth Information
Relative URLs
Up to this point, the discussion has focused on a specific form of URL, typically termed an
absolute URL. Absolute URLs completely spell out the protocol, host, directory, and
filename. Providing such detail throughout a Web site can be tedious and unnecessary,
which is where a shortened form of URL, termed a relative URL, comes into use. With
relative URLs, the various parts of the address—the site, directory, and protocol—can be
inferred from the URL of the current document, or through the <base> tag. The best way to
illustrate the idea of relative URLs is by example.
If a Web site has an address of, a user can access the home
page with a URL such as A link to this page from an
outside system also would contain the address Once at
the site, however, there is no reason to continue spelling out the full address of the site. A
fully qualified link from the home page to a staff page in the root directory called staff.html
would be The protocol, address, and directory
name can be inferred, so all that is needed is the address staff.html. This relative scheme
works because is inferred as the base of all future links
that omit protocol and domain, thus allowing for the shorthand relative notation. The
relative notation can be used with filenames and directories, as shown by the examples in
Table D-5.
When relative URLs are used within a Web site, the site becomes transportable. By not
spelling out the server name in every link, you can develop a Web site on one server and
move it to another. If you use absolute URLs, however, all links have to be changed if a server
changes names or the files are moved to another site.
Using the <base> Tag
Of course, using relative URLs also has a potential downside: They can become confusing
in a large site, particularly if centralized directories are used for things such as images.
Imagine having URLs such as ../../../images/logo.gif in files deep in a site structure. Some
users might be tempted to simply copy files around a site to avoid such problems, but then
updating and caching issues arise. One solution is to use a <base> tag. Another solution is
Current Page Address
Destination Address
Relative URL
T ABLE D-5 Relative URL Formation Examples
Search WWH ::

Custom Search