Comp 484
Perhaps the most important aspect of HTML is the ability to link from one document to another. This is the basic concept underlying the web, and without this functionality the World Wide Web would not exist.
Creating links is relatively straightforward, and the syntax provides a lot of flexibility in where and how links are applied. To create a link, you’ll use the anchor element (<a>) to wrap the content you wish to convert to a link. Attributes inside the anchor tag tell the browser where the page is linking to, or point to an external resource that the browser should download.
Take the following link example:
<a href="syntax.htm" title="learn more about syntax">HTML syntax</a>
Here the text “HTML syntax” would now appear as a clickable link. The href attribute tells the browser how to resolve the link; that is, where the user should be directed when the link is clicked. The optional title attribute provides a description of the link and is helpful in making the link more accessible.
There are three basic types of links: absolute, site-root relative, and document relative. Each of these types refers to the value of the href attribute, which directs how the browser should resolve a link once it has been clicked.
These links contain the entire URL necessary to resolve a link, including the protocol. This is usually done for external links, which are links to pages outside of the current site. Here’s an example of an absolute link:
<a href="http://www.google.com" title="You can find it at google.com!">google.com</a>
These links are commonly used to navigate internally within a site. For example, if you were on the home page of your site and wanted to navigate to the contact page, you simply provide the path from the home page to the contact page for the href value.
<a href="contact.htm" title="our contact page">Contact us</a>
This link assumes that the contact page and the current page are in the same directory. If the contact page were located in a directory below the current page, the link would look like this:
<a href="resources/contact.htm" title="our contact page">Contact us</a>
To move out of a directory, you precede the page with the “../” characters:
<a href="../contact.htm" title="our contact page">Contact us</a>
This link would move up from the current directory and find the contact page in the parent directory. You can use as many of these “../” as needed to properly resolve the link.
These are similar to document relative links, but start at the root folder of the site. All links are preceded by a forward slash (/).
<a href="/contact.htm" title="our contact page">Contact us</a>
If the contact page were located deeper within the site, the link would look like this:
<a href="/resources/contact.htm" title="our contact page">Contact us</a>
Occasionally you’ll want a link to refer to a specific location within a page. This can be done using fragment identifiers, which point to elements with a specific ID attribute.
<h2 id="camp">Camping</h2>
Elsewhere on the page you could link to this section like this:
<a href="#camp">Learn more about camping</a>
You can also link to fragment identifiers on external pages by appending the fragment identifier to the URL.
<a href="faq.htm#camp">Read our FAQ on camping.</a>