Links in HTML
Table of contents
E-mail links
The idea behind this type of link isn't about altering the element or using a new one. The secret of e-mail links is that exists a particular type of URI that's been specially designed to reach resources through Internet mail.
Then, the key to this matter is how these particular URIs are built. The most basic format of an e-mail URI consists of the string "mailto:" followed by a comma-separated list of one or more e-mail addresses. The following example uses this strcture in a real link.
<a href="mailto:webmaster@htmlquick.com">e-mail me!</a>
The usual action that browsers carry out when you click this link is to open the default e-mail client and compose a new message with the data provided by the link. But when the system doesn't have a default e-mail client, activating this link has no consequences at all.
There's also the possibility of providing additional information to complete other fields in the e-mail composed, like Cc, Bcc, subject and body. To include one or more of these fields in the link you need to add, after the list of e-mail addresses, a question mark ("?") and a list of parameters separated by an ampersand ("&"). Now, each one of these parameters has a specific structure too, which consists of the name of the parameter (Cc, Bcc, subject, body) followed by an equal sign ("=") and its value.
This part got a little complicated, so we're using the following example to make all this more tangible. There, we're adding to the example above, a second address to the Cc field, a subject and a body.
<a href="mailto:webmaster@htmlquick.com?cc=archive@htmlquick.com&subject=From_the_web...&body=Fill_your_message_here...">e-mail me!</a>
You may wonder why we used underscores ("_") instead of spaces in the previous example. This is because it's a URI we're writing in, and URIs need some characters to be encoded (spaces, slashes, question marks, ampersands, etc). So, in an effort to keep things simple, we replaced spaces by underscores.
Just before we leave, let's see how the previous example looks like with encoded spaces ("%20").
<a href="mailto:webmaster@htmlquick.com?cc=archive@htmlquick.com&subject=From%20the%20web...&body=Fill%20your%20message%20here...">e-mail me!</a>
Messy, uh? But don't worry, you get around it with time.
The link element
The link element can be used in two different ways. This section will only cover one of these uses (with the rel attribute), leaving the other to be discussed later on.
This type of link is very particular. It's used to provide relational information about the entire document, reason why it's only declared in the head.
Links declared with the link element are usually hidden from the user. Yet, their information could be shown, for example, in a toolbar or a summary applet.
The many relationships this element can establish, depend mainly on the value of the rel attribute. In most usual cases it defines the structure of the website (next or previous document), provides alternative versions of the document (for printer, in another language, etc.) and points to external resources with style information for the document.
The follwoing example shows the header section of a document with the following relational information (in that order): an index; the previous and following documents in the sequence; copyright information about the document; an alternative version for printing purposes; an alternative version in spanish; and a resource with style information to be applied in the document.
<head>
<link rel="index" href="index.html" />
<link rel="prev" href="doc1.html" />
<link rel="next" href="doc3.html" />
<link rel="license" href="copyright.html" />
<link rel="alternate" media="print" href="doc2-printer.html" />
<link rel="alternate" lang="es" href="es/doc2.html" />
<link type="text/css" href="basic.css" media="screen" />
</head>