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 link: 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 the link 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>
Occasionally you’ll want a link to refer to a specific location within a page. This can be done using a special kind of link called a fragment identifier. These links point to elements with a specific ID attribute. Let’s say, for example, you have a long list of FAQs on a page organized by categories and you had a heading at the top of each category. If you assigned each heading an ID attribute, you could use those IDs to create a links that jump to specific categories. For example, you could format the Camping FAQs heading like this:
<h2 id=”camp”>Camping</h2>
Elsewhere on the page you could link to this section by creating the following link:
<a href=”#camp”>Learn more about camping</a>
Note the hash symbol (#) prior to the ID value. This tells the browser to look for an element with the ID value that follows.You can link to fragment identifiers on external pages as well. Simply append the fragment identifier to the URL and the link will jump to not only to that page, but that specific section as well.
<a href=”faq.htm#camp”>Read our FAQ on camping.</a>