Links in HTML

This tutorial explains the nature and usage of links in HTML. It will cover the most important aspects of links and the different ways they can be defined.

Concept

Links are a vital part of HTML and the very reason why the WWW exists. In general, these links, toghether with browsers' functionalities, allow users to move from one document to another in a very direct way.

The basic function of a link is to make a reference, from an HTML document to a resource, which can be itself another document. In other words, a link defines a relationship between two resources on the web.

The a element

The a element can be used to insert links inside the content of a document. It provides authors with a mechanism to redirect their users, or recommend to them, another resource while they read the content of the document.

Browsers highlight the content of this element (by default, showing it in blue and underlined) and allow users to follow the link with a click.

Among the wide variety of ways an author has to build a link, the most basic consists of the a element with content (text between the opening and closing tags) and a reference to the pointed resource (a URI specified in the href attribute). In the example below we'll define a basic link following this criteria: the opening tag with the resource's URI in the href attribute, the content and the closing tag.

To improve accessibility, the text of a link (usually known as "anchor text") must provide a concise description about the contents of the resource linked.

<a href="../reference/uri-url.html">Definition of URI and URL</a>

If you're wondering what that "URI" is, stop worrying. For now lets just say it's a "route" to go from one resource to another. Later, we'll see this subject in detail in the tutorial "Organizing a website".

In the example above we made a link using a run of text as content, but you can actually link almost anything with the a element, specially since HTML5 stepped into the scene. In the following example we'll make a link with a piece of document that includes an image (img element) and text.

<a href="http://www.w3.org/">
  <img src="../images/w3c-icon.gif">
  The World Wide Web Consortium
</a>

Linking to fragments

A link can also be more specific and link to a particular fragment of another document. To create this type of links, you should carry out two tasks:

  1. Prepare the destination document, adding an id attribute to the element you need to link to. It's a good practice to create links that point to the sections of a document, defined through sectioning elements likesection, article, h1, etc. Whatever identifier you use in this attribute, you'll need it in the second part of this process.
  2. Create the link in the originating document (with a) appending to the URI of the destination document, a hash sign ("#") and the identifier used in the previous step.

To make it clearer, let's see an example. First, we'll analyze the strcuture of this website in order to make a link to one of its sections. In any of its pages you'll find a good number of id attributes being used for the purposes of interlinking. In fact, each section in this document is ready to be linked. In the following code, we'll be unveiling the structure of the first section in this document, called "Concept".

<section id="concept">
  <h2>Concept</h2>
  ... content, examples, etc. ...
</section>

Here you can see, basically, three things: the section element setting limits and containing all the elements in the section; the h2 heading defining a title for the section; and the content. Taking advantage of the presence of section, we set the id attribute there, so links would make reference to "this section of the document".

Now comes the second part where we'll set up a link that points to that section. This is rather easy, and consists basically of creating a link to this same page, adding the hash sign ("#") and the value of the id attribute of the linked section, to the URI in the href attribute. Because we're linking from and to the same document, the URI is the empty string (""). Adding to this the hash sign ("#") and the id we get just "#concept".

Let's create that link in an example and see what the browser does for us when we click the link.

<a href="#concept">Back to section "Concept"</a>

As you see, the browser does the same it does with regular links: it takes you to the linked content.

123Próx