News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 06 – Links

The anchor element <a> is used to create links and link targets. The destination for a link is set with the href (hypertext reference) attribute to a URL, which is an Internet address.

<a href="MyPage.html">Web document</a>

This address can link to any type of file, not just to other web pages. Some files can be viewed directly in the browser, such as text and images, while other files will automatically be downloaded.

<a href="pvt.png">View</a>
<a href="file.zip">Download</a>

A link can point to a mail address using a mailto notation. Such a link will open up a new mail window using the clients default e-mail program.

<a href="mailto:foo@bar.com">Simple mailto link</a>
<a href="mailto:foo@bar.com?
         subject=mysubject&
         body=mybody&
         cc=mycopy@bar.com&
         bcc=myblindcopy@bar.com">Mailto link 
         with parameters</a>

Comma can be used to separate multiple e-mail addresses. To specify a newline character in the body section it needs to be URL encoded as “%0A”. Spaces should also be replaced with “%20” to make sure the browser displays the text properly.

A URL can be either relative or absolute. A relative address uses the current document location as its base address and is therefore useful when referencing local files and pages. The example below shows how to link to a document in the same folder, a subfolder or a parent folder relative to the current document.

<a href="index.html">Current folder</a>
<a href="folder/index.html">Subfolder</a>
<a href="../index.html">Parent folder</a>

An external website on the other hand need to be linked to using an absolute URL, which contains the complete address.

<a href="http://www.domain.com/index.html">Full path</a>

Named anchors and id

If an anchor is given a name instead of a hypertext reference it can be used as a hyperlink target within that document. The named anchor is linked to by appending a pound sign (#) and the anchor’s name as a suffix to the URL.

<!-- label declaration -->
<a name="section"></a>
 
<!-- page section link -->
<a href="MyPage.html#section">Go to section</a>

If the target is in the current page the address part can be left out completely.

<a href="#section">Go to section</a>

Another way of designating hyperlink targets within a web page is using the id attribute. This is a generic attribute that almost any element can have, which makes it possible to turn any element into a potential hyperlink target.

<a id="section"></a>
<a href="MyPage.html#section">Go to section</a>

The id attribute’s value must be unique within the web document. The same is true for the name of a named anchor.

To change the hyperlink colors there are three attributes available for the <body> tag: unvisited, visited and active. All of these have become deprecated in favor of CSS. Despite this it is still possible to color links using the “link” attribute for unvisited links, “vlink” for visited links and “alink” for links as they are being clicked.

<body link="#FF0000" vlink="orange" alink="#CC00FF">
<a href="doc.html">Unvisited</a>
<a href="mypage.html">Visited</a>
<a href="doc.html">Active</a>

Base element

The <base> header tag can change the base address for all relative links in the document.

<base href="http://www.google.com">
<!-- Link to www.google.com/index.html -->
<a href="index.html">Google</a>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours