Skip to site navigation

HTML: Attributes and links which we actually create a "web" of pages.


So far we've learnt the basics of tags and the structure of an HTML page. We've created rich-text, with bolds; emphasis and italics. However, we've yet to see the most impressive and flexible feature of the World Wide Web: links.


Links allow the user to move from one page to another and are included using the <a> tag ("a" for anchor). However, look at the code below:

<p>Please continue to the <a>next page</a>.</p>

Notice that we've not been able to specify the destination! We do that by adding attributes to the tag:

<p>Please continue to the <a href="page2.html">next page</a>.</p>

The attribute, "href", has a value of page2.html - note that the value doesn't include the quotes which only surround the value to indicate to the browser where it starts and ends.

Always give your links meaningful names: this is useful to blind users; advanced search engines like Google; and won't disrupt the flow of your text. Compare the following:

  1. To send me an email, please click here.
  2. Please feel free to send me an email.

I'm sure you'll agree that the second one reads better, and also makes the link itself meaningful: the link will send an email, rather than the abstract concept of "clicking here". The first one may also make you appear silly if the user controls their browser through speech: they may ask their browser to follow a link, rather than by clicking a mouse.


A link may go to a full URL or just the name of a new file. The first is called an absolute link, such as:; the second is a relative URL. Relative URLs can take the form of:

The final example shows that most web servers will use a default filename of index.html, index.htm or similar when asked to fetch a directory.

If you want to fetch a directory's index.html then ensure that your link contains a trailing slash, '/'. The web browser does not know about the directory structure or the default filename and it will attempt to fetch a file called /writings/html (for example). The web server will notice that this file doesn't exist, but does exist as a directory and will redirect the browser to /writings/html/ - this will mean that there will be two connections to fetch the one page, meaning the page won't load as quickly.

These files are specified, due to traditional reasons, in similar way to a UNIX filesystem:

Construct Meaning
/ The root directory of the site, eg.
.. The parent of the current directory, eg. we're currently in: /writings/html/. ".." takes us to /writings. "../../" moves to /
. The current directory - kind of pointless as ./lesson2.html is exactly the same as lesson2.html


Links don't just have to take you from one page to another, they can also take you to a particular point within a page:

<h2><a name="section2">This is section 2</a></h2> .... <p>Go back to <a href="#section2">section two</a>.</p>

Note that the named anchor doesn't display any differently:

This is section 2


Go back to section two.

As well as moving within a page, the "#name" will work when appended to a larger URL:

<a href="/writings/html/lesson3.html#section2">L3.2</a>


We've now seen attributes, which allow us to use HTML tags do different things in different places; explored links and seen how named anchors can allow the user to move to different parts of a long document easily. In the next part we'll explore a tag which makes extensive use of attributes: images.

Beginner's Guide to HTML:
  1. Introduction and history
  2. Structure and basics
  3. Attributes and links
  4. Images
  5. Fonts
  6. Lists