Links

So far you've been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it all links together.

The 'H' and 'T' in 'HTML' stand for 'hypertext', which basically means a system of linked text.

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.

Add this to your document:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>

	<h1>My first web page</h1>

	<h2>What this is</h2>
	<p>A simple page put together using HTML</p>

	<h2>Why this is</h2>
	<p>To learn HTML</p>

	<h2>Where to find the tutorial</h2>
	<p><a href="http://htm4beginners.com">HTML 4 Beginners</a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://html4beginners.com", or it can be relative to the current page.

So if, for example, you had another file called "flyingmoss.html" then the line of code would simply be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that id.

The a tag allows you to open the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't take the user away from your site.

There are a number of reasons why you shouldn't do this however.

From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the "back" button. Opening a new window disables this function.

On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves.

Related Pages

Next: Images - Adding something a bit more than text...
Previous: Lists - How to define ordered and unordered lists.