Exploring link options

You can link to a variety of online resources:

• Other HTML pages (either on your website or on another website)
• Different locations on the same HTML page
• Resources that aren’t even HTML pages at all, such as e-mail addresses, pictures, and text files or downloads for visitors

Link locations, captions, and destinations exert a huge influence on how site visitors perceive links. The kind of link you create is determined by what you link to and how you formulate your link markup.

Absolute links

An absolute link uses a complete URL to connect browsers to a web page or online resource. Links that use a complete URL to point to a resource are called absolute because they provide a complete, stand-alone path to another web resource. When you link to a page on someone else’s website, the web browser needs every bit of information in the URL to find that page. The browser starts with the domain in the URL and works its way through the path to a specific file. When you link to files on someone else’s site, you must always use absolute URLs in the href attribute of the anchor element. 

Here’s an example:

http://www.website.com/directory/page.html

Relative links

A relative link uses a kind of shorthand to specify a URL for a resource you’re pointing to.

Use the following guidelines with relative links in your HTML pages:

• Create relative links between resources in the same domain.
• Because both resources are in the same domain, you may omit domain information from the URL.

A relative URL uses the location of the resource you link from to identify the location of the resource you link to (for example, page.html). If you use relative links on your site, your links still work if you change:

• Servers.
• Domain names.

Simple links

You can take advantage of relative URLs when you create a link between pages on the same website. If you want to make a link from http://www.mysite.com/home.html to http://www.mysite.com/about.html, you can use this simplified, relative URL in an anchor element on home.html:

<p>Learn more <a href=”about.html”>about</a> our company.</p>

When a browser sees a link without a domain name, the browser assumes that the link is relative and uses the domain and path from the linking page to find the linked page. The preceding example works only if home.html and about.html are in the same directory, though.

Site links

As your site grows more complex and you organize your files into various folders, you can still use relative links. However, you must provide additional information in the relative URL to help the browser find files that don’t reside in the same directory as the file from which you’re linking. Use ../ (two periods and a slash) before the filename to indicate that the browser should move up one level in the directory structure.

The markup for this directory navigation process looks like this:

<a href=”../docs/home.html>Documentation home</a>

The notation in this anchor element instructs the browser to take these steps:

1. Move up one folder from the folder the linking document is stored in.

2. Find a folder called docs.

3. Inside that folder, find a file called home.html.

When you create a relative link, the location of the file to which you link is always relative to the file from which you link. As you create a relative URL, trace the path a browser takes if it starts on the page you’re linking from to get to the page to which you’re linking. That path defines the URL you need.

---