Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.
What is a hyperlink?
Hyperlinks are one of the most exciting innovations the Web has to offer. Well, they've been a feature of the Web since the very beginning, but they are what makes the Web a Web — they allow us to link our documents to any other document (or other resource) we want to, we can also link to specific parts of documents, and we can make apps available at a simple web address (contrast this to native apps, which have to be installed and all that business.) Just about any web content can be converted to a link, so that when clicked (or otherwise activated) it will make the web browser go to another web address (URL).
The BBC homepage, for example, contains a large number of links to point to not only multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools) and more.
Anatomy of a link
A basic link is created by wrapping the text (or other content, see Block level
links) you want to turn into a link inside an
<a> element, and giving it an
href attribute (also known as a Hypertext Reference , or target) that will
contain the web address you want the link to point to.
<p>I'm creating a link to<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p>
I'm creating a link tothe Mozilla homepage.
Another attribute you may want to add to your links is title; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:
<p>I'm creating a link to<ahref="https://www.mozilla.org/en-US/"title="The best place to find more information about Mozilla'smission and how to contribute">the Mozilla homepage</a>.</p>
This gives us the following result (the title will come up as a tooltip when the link is hovered over):
I'm creating a link tothe Mozilla homepage.
<a href="https://www.mozilla.org/en-US/"><imgsrc="mozilla-image.png"alt="mozilla logo that links to the mozilla homepage"/></a>
It is possible to create links or buttons that, when clicked, open a new
outgoing email message rather than linking to a resource or page. This is done
<a> element and the
mailto: URL scheme.
In its most basic and commonly used form, a
mailto: link simply indicates the
email address of the intended recipient. For example:
<a href="mailto:firstname.lastname@example.org">Send email to nowhere</a> This results in alink that looks like this: Send email to nowhere.
In fact, the email address is even optional. If you leave it out (that is, your
href is simply
"mailto:"), a new outgoing email window will be opened by the
user's mail client that has no destination address specified yet. This is often
useful as "Share" links that users can click to send an email to an address of
In addition to the email address, you can provide other information. In fact,
any standard mail header fields can be added to the
mailto URL you provide.
The most commonly used of these are "subject", "cc", and "body" (which is not a
true header field, but allows you to specify a short content message for the new
email). Each field and its value is specified as a query term.
Here's an example that includes a cc, bcc, subject and body:
<ahref="mailto:email@example.comfirstname.lastname@example.orgemail@example.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body</a>
When linking to a specific location within your site or application you can use
absolute link. When using an absolute link you provide the entire path to
If we were making a link from the
cups page to a page that was a sibling we
could use a
./ at the beginning of the link means from the current path and then we
look for a page
If we were on the
cups page and wanted to go back to the
promotional page we
could use another form of relative link.
In this case the
.. means to go up one level. Since we are currently at
/marketing/products/promotional/cups we would end up at
By using absolute and relative links we can navigate the structure of our page. Absolute links help us link to specific locations on our site by resetting us back to the root of the site. Relative links help us avoid having to repeatedly reference all the way back to the root which helps us move entire sections of our site without breaking links.