Hypertext Links

A hypertext link is a clickable text string (or image) within the body of a web page that will take you either to another web page, or to a different location within the current web page. If the link is to another web page, that page may reside on the same server as the current page, or on a completely different server somewhere else in the world. Hypertext links are one of the features that make the Web such a powerful tool in terms of being able to find the information you are seeking. The link itself consists of the Uniform Resource Locator (URL) for a specific Internet resource. The URL consists of a scheme identifier (e.g. "http"), followed by a domain name (e.g. "www.technologyuk.net"), and the path information for the file in which the resource resides. A typical URL (the URL for this page, in fact) is shown below (note the use of the colon, forward slash, and period separators).


http://www.technologyuk.net/web_page_design/hypertext_links.html


Hypertext links can point to any kind of Internet resource, including HTML documents, image and sound files, video archives, and animation files. They can also be used to indirectly access live data streams. A link is created within a HTML document using the <a> . . . </a> tag set (the ‘a’ in this case refers to an anchor element). If the link is to another HTML document on the same server, the URL used need not include the domain name of the server, just the path (if required) and filename of the page we want to link to. For example, a link from this page back to the TechnologyUK.net home page might appear as shown below.


<a href="/index.html">Home</a>


The href attribute in this instance defines the path and filename of the TechnologyUK.net home page relative to the location on the server of this page. Relative links are portable in the sense that their use ensures that if the entire site was moved to a different domain, they links would still work correctly. This is very useful if you are forced to change the domain name (or choose to do so), or if you wish to set up one or more mirror sites (copies of the original site, but on different servers). If you wish to include a link to a HTML document on another server, you must use an absolute URL. The term "absolute" refers to the fact that the full URL, including the scheme, domain name and complete file path must be included. The same link as shown above, but using an absolute URL, would appear as follows:


<a href="http://www.technologyuk.net/index.html">Home</a>


Bear in mind here that there is usually a default file in the root directory of any website that will be displayed, regardless of whether its name is explicitly included in a hypertext link’s URL, so long as the URL is correctly formatted and includes the domain name for the site. With that in mind, we could create an absolute URL as shown below to create a link to the TechnologyUK.net home page from any web page on any server, anywhere in the world.


<a href="http://www.technologyuk.net">Visit TechnologyUK.net!</a>


When used as a hypertext link as illustrated above, the term "anchor" is probably not all that appropriate for describing the <a> . . . </a> tag set, and most people refer to them simply as "links" or "hyperlinks". However, the anchor element is also used to define a specific location (or anchor) within a document that can be the target for a hypertext link within the same document. Anchors are useful when you have a large document that is organised into multiple sections covering different (though presumably related) topics. As such, they can be used to create a "table of contents" of sorts at the top of a large web document, consisting of a set of links that point to the various anchors. Each anchor must have a name that is unique within the HTML file in which it appears, and may be referenced by one or more links located within the same document or another document (or both).

An anchor can also be created at the very top of a HTML document that can be used to take the user back to the beginning of the page immediately from any other point in the document, providing you have placed links to this anchor at strategic locations throughout your page (note that if the browser cannot find an anchor referenced by a link in an HTML document, it goes to the top of the document anyway). An anchor is defined using the name attribute (as opposed to the href attribute). Consider the partial screenshot below, which is taken from one of the pages on this site:


Partial screenshot showing links to various anchors on the same web page

Partial screenshot showing links to various anchors on the same web page


The code for the link "Education and training" (circled) is shown below.


<a class="internal" href="#ID18"> Education and training</a>


The class reference is of no importance at the moment, as it simply determines the way the link is styled. The href attribute value is set to "#ID18", which is the name of an anchor defined elsewhere in the page, prefixed with the hash sign (#). The target area of the page is shown in the following partial screenshot (note the link "[Return to top of page]", which is targeted at another anchor located at the beginning of the page content).


Partial screenshot showing the target location for the above link

Partial screenshot showing the target location for the above link


The code used to define the anchor for the "Education and training" link, the document heading to which it refers, and the "[Return to top of page]" link that follows the header are shown below. Note that the anchor itself does not enclose any text, and is not visible as such on the page. The link that refers to it is of course visible, of necessity.


<a class ="header" name="ID18"></a>

<h2>
  <br/>
  Education and training
</h2>

<div class="center">
  <a href="#ID0">[Return to top of page]</a>
</div>


We can define a link from one page to an anchor on another page quite easily. The following code would be used to define a link from this page to the target of the "Education and training" link referred to above:


<a href="/internet/online_services.shtml#ID18">click here</a>


To see the link in action, click here (click on the "Back" button to return to this page).