18: HTML links - let's build a web!

By Christian Heilmann

11th October 2012: Material moved to webplatform.org

The Opera web standards curriculum has now been moved to the docs section of the W3C webplatform.org site. Go there to find updated versions of these docs, and much more besides!

12th April 2012: This article is obsolete

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.

Introduction

In this tutorial you’ll learn all about one of the most ground-breaking inventions in the history of the web—links. Links allow the reader of a document to follow them to another document and jump from server to server without having to disconnect and connect all over again. A lot has happened since they were first invented but one thing stayed the same: links are a very important part of the web experience and you can make it easy or hard for your web site’s visitors depending on how you use them.

After you’ve gone through this article you’ll know how to create links that are easy to understand and function in any environment. Furthermore you’ll learn how linking affects your search engine popularity and you’ll get some tips about wording links. As usual, there is an accompanying zip file to this tutorial, which contains several files I’ll refer to as we go along. The structure of the article is as follows:

What are links?

Links are parts of a web site (usually created using HTML, but not always) that point to other resources—other HTML documents, text files, PDFs, etc. There are links that should be followed automatically by the browser, created using link elements (you’ve already encountered some of those in earlier articles—they were used to import CSS files into an HTML document) and then there are links that are optional for the user to activate. These are called anchors and you can add them to the document using the a element.

The anatomy of an anchor link

You can turn any inline element in the document into an anchor link by adding an a element around it. For example, in the following HTML document the text Yahoo Developer Network gets turned into a link (linkexample.html).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>A link to the YDN</h1>
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

Visitors activating this link (either by clicking it with a mouse, or activating it with the keyboard or voice in some cases) will leave the current site and go to the YDN. There are more changes happening to the link itself, and we’ll see about them later when we talk about link styling.

The anchor has several attributes you can add:

href—the resource it points to (either an external file or an anchor ID).
id—the anchor ID if the anchor is a target and not a link.
title—extra information about the external resource.

Let’s go through the most important attributes first and then talk about what you can do to make things easy to grasp for your visitors.

Link or target? The `id` and `href` attributes

An a element can play several roles depending on which attributes are set. The most common attribute you’ll use is the href attribute, which defines what resource the link points to. This attribute can contain different values:

A URL in the same folder (help.html), relative to the current folder (for example “../../help/help.html”—2 dots means “go up one level in the site folder hierarchy”) or absolute to the server root (for example “/help/help.html”—having a forward slash at the front of the address means the address starts at the root of the computer the page is on)
A URL on a different server altogether (for example “http://wait-till-i.com” or “ftp://ftp.opera.com/” or “http://developer.yahoo.com/yui”).
A fragment identifier or id name preceded by a hash (for example “#menu”). This points to a target inside the same document.
A mixture of URLs and fragment identifiers—you can link directly to a section of a different document by pointing the href attribute to a URL followed by a fragment identifier (for example “http://developer.yahoo.com/yui/#cheatsheets”).

Any of these will make it a link as it points to somewhere else. On the other hand an id attribute will make it an anchor in the page—something another link points to. This is a bit confusing as both use the anchor element (a). To make it easy to remember think of it like this: an id attribute makes a link an anchor and you can use it to link to specific document sections. The following HTML has examples of all the different types of links in it (linkexamples.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Different Link examples</h1>

  <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
  <div id="nav">
    <ul id="toc">
      <li><a href="#sec1">Section One</a></li>
      <li><a href="#sec2">Section Two</a></li>
      <li><a href="#sec3">Section Three</a></li>
      <li><a href="#sec4">Section Four</a></li>
      <li><a href="#sec5">Section Five</a></li>
    </ul>
  </div>  
    
  <div id="content">
    <div>
      <h2><a id="sec1">Section #1</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec2">Section #2</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec3">Section #3</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec4">Section #4</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec5">Section #5</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
  </div>

  <h2>Some other link examples</h2>
  <ul>
    <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
    <li><a href="../the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
    <li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
    <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
  </ul>

</body>
</html>

Open this file in your browser of choice and experiment with it. You’ll find that activating any of the links in the first list will jump to the appropriate section of the document. This is because they are connected by the same fragment identifier—the first link in the list for example has an href attribute of #sec1, which is the same as the ID value of the link inside the first h2 element of the content. This is all you need to do to connect two anchor elements in a document—use the same value preceded by a hash if you link to it in an href attribute. You might also have realized that the URL in the location bar of your browser changed and now shows the fragment identifier at the end of it, which means visitors can bookmark this section or email the link to other people to send them exactly where they should go.

However, if you activate any of the “Back to menu” links, the same functionality occurs. How is that possible? Fragment identifiers can be any element with an ID. To recap:

anchor links can have a fragment identifier as the value of the ref attribute—this fragment identifier must start with a hash sign (#).
When activated, this link will jump to any HTML element with an id of this value. The IDs on each page must be unique.
IDs follow certain naming conventions. Most importantly is that they must start with an alphanumeric character and must not have any spaces in them.

That covers the menu and the different sections in the example but what about the other links? If you try them out you’ll see that they point to different targets—one goes to another site, another displays a photo and the third one shows a specific section of another web page (found by jumping to a specific ID). If all of that worked for you, great—but what if you or your browser couldn’t understand some of these resources?

Don’t leave any ambiguity about what you’re linking to

The most important thing to remember about links is that they are a substantial part of your relationship with your visitors. They trust that when you offer them a link, they can follow it and get good, relevant information. If your links don’t work because the linked resource is not available or in a format the visitor cannot consume you betrayed that trust and lost credibility. Don’t let that happen.

Providing extra information with a `title` attribute

Like almost any other HTML element you can add a title attribute to an a element to add some extra information. Browsers will show a so called tooltip when visitors hover their mouse cursor over the link. This tooltip then tells them what the link is about. For example you could give a small introduction to the content and location of the linked document (titleexample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Adding extra information with a title attribute</h1>
  <ul>
    <li>Find more information on the <a title="The Yahoo Developer Network is the main hub for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) and the Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
  </ul>

  </body>
</html>

Figure 1: Adding a title attribute shows the information as a tooltip when visitors hover over the link.

However, you cannot expect visitors to have enough patience and hand-eye coordination to rely on this for crucial information. Visually impaired users, who cannot see the page at all, are very likely not to be able to reach this information. While screen readers have the option to read out title attributes for the end user it is turned off by default—which is why you should never use the title attribute for crucial information about the link. Crucial information might be:

Linking to non-HTML resources like PDF files, images, videos, sound files or downloads.
Leaving the current site and linking to another server (external vs internal links).
Linking to a document that’ll open in a different frame or a popup.

Linking to non-HTML resources—don’t make people guess

It can be very annoying when you click on a link and your browser does not know what to do with what the link you clicked on points to. It is pretty common however to see web sites link to images, PDF documents and videos without warning their visitors to be prepared. Videos especially are very often a cause for browser crashes. Furthermore, the resource might be on the larger side (20MB PDF anyone?) which means that visitors might prefer to download it rather than opening it inside the browser and add to its already hefty memory consumption, or just not access it at all.

One of the biggest success factors of a web product is not keeping people guessing what happens when they perform an action and instead tell them flat out what effects their action will have. In the case of links all you need to do to prevent a lot of frustration is to tell your visitors what the linked resource is. Here are some examples (linkingnonhtml.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Linking non-HTML resources</h1>

  <ul>
    <li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
    <li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
    <li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
    <li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
  </ul>

  </body>
</html>

By providing such information about the linked file and its size you leave the decision of what to do with it with your visitors rather than expecting them to have certain browser settings or installed software. If you mix that with clever styling you can even make it look pretty and intuitive. If you want to be very safe, also offer a help section that explains what the different file formats are and where you could get the software needed to display them.

External vs. internal links

One of the biggest fears of business decision makers when it comes to their company’s web sites is people leaving prematurely. This is often the reason for never offering third party links (unless the third parties pay money for the privilege of having web traffic directed towards them). I’ll come back to this error in judgment later on; for now let’s talk about what people do to avoid visitors leaving their site and how these measures affect the site’s success.

Frames and popups—just say no

The fear of losing visitors to other sites while still wanting to link to them gave us some inventions in web development that have been a thorn in the side of usable sites for years: frames and popups.

Using HTML frames means you separate the page shown in the browser into several different documents. The benefit is that the document seemingly stays the same even when you load parts of it either from your own server or from third party servers. This is where the usefulness ends however—frames are a terrible user experience and actually harmful:

Search engines can never index a whole page but instead might show up parts of a page in search results that don’t make sense out of context.
Visitors cannot bookmark the page—the next time they open their bookmark they’ll get the initial state of the frameset and not the page as they left it.
Visitors dependent on assistive technology have a very hard time navigating around framesets.
Third party sites might not like to be shown inside a frameset and use “framebreaker” scripts that replace framesets with the real URL when you try to embed them. This is to stop criminals luring Internet users into entering for example credit card information into a web site that seemingly looks like a bank (so called “phishing”).

Links inside a frameset use the target attribute of the anchor to target the correct frame. Each frame in a frameset gets a certain name and activating the link would open the document defined in the href attribute in that frame. If the frameset is not available (for example when a visitor found the document with the links via a search engine) each link opens in a new browser instance.

Opening a new browser instance is another common way to link to third party sites—either with a scripted pop-up window or with a target attribute with the value of _blank. The fact that every modern browser comes with a pop-up blocker should give an indication of how safe it is to rely on this technique in this day and age. It’s not!

In short: do not use the target attribute when you create links, unless you really know what you are doing. It is an outdated idea anyhow—these days most browsers have tabbed interfaces, so users can open third party sites in the background for later reading while they stay on your site. Under certain circumstances you may want to indicate the difference between external and internal links, but always leave it to the discretion of the visitor what they want to do with them.

Benefits of outbound and inbound links

There are several good reasons for linking to third party sites even when they are competitors.

It gives you credibility in the eyes of your visitors—you are so sure of the quality of your content that you don’t shy away from the competition.
It is an opportunity to deliver a full service—you can link to content and articles or even products on other sites that you don’t cover but that might be of interest for those visitors who want to dive deeper into the topic at hand.
You can prove a point by building on an older article by a third party and offering a better or different solution and referencing the old article as a proof via a link.

The usefulness of inbound links (links pointing from a third party site to yours) is less debated. The more often that valid and high quality sites link to yours with relevant keywords, the higher you’ll rank in search engines such as Google. Before that happens however you need to prove that you don’t shy away from linking to others either.

The relevant keywords bring us to another very important part of creating good links: how to word them.

Link wording

I’ve covered this partly in the section about linking to non-HTML resources, but it is good to remind ourselves that links are not only part of the page copy but also interactive elements in the document.

Some assistive technologies will offer a list of links instead of the whole document to allow visitors to quickly navigate their way through it, which means that you need to make sure that your link texts make sense outside the context they are in. You can easily check this in Opera by opening any web site and choosing Tools > Links from the menu or pressing Ctrl + Shift + L. You’ll get a new tab that shows all the links in the document and where they point to.

This means you should make sure not only that all the link texts make sense, but also that there are not links that have the same wording but point to different resources. The classic mistake here is “click here” links, worded for example like “To download the latest version of our tool click here”. It is much better to use a link text that explains what it points to—in this case “You can download the latest version of our tool and try it out for yourself”.

The same applies to “more” links. You’ll find these in news sites where you get a heading and a teaser text and a “more” or “full story” link to follow. The solution to this problem is to either use a linked “more” image and give it a unique alternative text or to add a span inside the link after the “more” and hide it with CSS. You’ll hear more about these tricks in the tutorial about menus and navigation later in the course.

Link styling

We’re not quite at CSS yet with this course, but it is useful to consider at this point that the way links look is very important and there are several different link states to consider. The link states (which later on relate to CSS pseudo-selectors—this sounds complex, but it isn’t) are:

link—the default state—it defines what links should look like in a certain part of the document. By default, unvisited links are coloured blue.
visited—the style of a link that was already visited before (and might already be in the browser cache). By default, already visited links are colored purple.
hover—the style of a link whilst the mouse cursor is hovering over it.
active—the style of the link while it is activated, ie while the connection to the other site is in progress; it is also the style of the last activated link when you arrive at the document by going back in your browser.

Summary

We covered a lot this time, but it is very important to remember how links work and what they should do. You will learn a lot of tricks and techniques in your career as a web developer to override this default behaviour and I hope you’ll stop and wonder if what you are trying to do is really necessary.

I talked about:

The anatomy of the a element and its (non-deprecated) attributes
The difference between a elements as links (with an href attribute) and as anchors (with a name attribute)
The need for an anchor id to be unique
The necessity to tell visitors what to expect when they follow a link (what format is the file and how big is it)
How to add information via the title attribute that gets displayed as a tool-tip – and why this is not a safe way of providing crucial information
The difference between external (pointing to third party sites) and internal (pointing to documents on the same server) links
Outdated practices like popups and frames and why you should avoid them
The benefits of linking to, and getting linked to by, other sites
How to word links properly so that they make sense out of context, and why this is necessary
The background behind basic link styling.

With this knowledge under your belt you should be able to write HTML documents that link properly and you are ready to go and think about menus and site navigation.

Exercise questions

What is wrong with the following link: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?
What is the target attribute in links for and are there any good uses for it?
I’ve talked about link relationships and connections between links and anchors. Is there an attribute for links that describes relationships between documents, too?
How can you write a link that sends the visitors to an element further down the page when they click it? What do you need to make sure of beforehand?

About the author

Picture of the article author Chris Heilmann

Photo credit: Bluesmoon

Chris Heilmann has been a web developer for ten years, after dabbling in radio journalism. He works for Yahoo! in the UK as trainer and lead developer, and oversees the code quality on the front end for Europe and Asia.

Chris blogs at Wait till I come and is available on many a social network as “codepo8”.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.