Tutorial: Making links

Level: Beginner. Published on 2 December 2004 in HTML

Where would the Web be without links? This essential tutorial shows you how to link your Web pages together.

Links make the Web what it is. If you're new to Web building and you're not sure how links work, this tutorial is for you! Read on...

What is a link?

A link is a piece of text or an image in a Web page that, when clicked on, takes you to another Web page or other content. Links are, by default, underlined and blue, although it's possible for a Web designer to change these defaults.

By linking your pages together like this, you can build a whole website. You can also link to other sites on the Web using the same technique.

The word 'link' is short for 'hyperlink', a term used to describe linking documents together.

How to make a link using HTML

The HTML tag that you use to build links is called the <a> tag. ('A' is short for 'Anchor', by the way. More on that later!) Here is some HTML to build a link to the Google search engine:

<a href="http://www.google.com/">Visit Google</a>

Here is how the above HTML code looks in the page. Try clicking on it! (Use your browser's "Back" button to return to this page.)

Visit Google

Notice that there are several parts that make up this link. Let's take a look at these parts now.

<a href="http://www.google.com/">

This tag tells the browser that we want to start a link at this point in the page, and that we want the link to point to http://www.google.com/. The text between the quotes (http://www.google.com/) is called a URL.

Next, we have:

Visit Google

This is the text that we want to turn into a link.

Finally, we have:

</a>

This closes the link. It's very important to remember to put the </a> tag at the end of your link, otherwise the rest of your Web page will become one long link!

Linking with an image

The above example used a piece of text ("Visit Google") for a link. In fact you can put anything you like between the <a href="..."> and </a> tags. Here's an example that uses an animated button image for the link:

<a href="http://www.google.com/">
<img src="click_here.gif" style="border: none;" alt="Click Here"/>
</a>

Here's how that looks in the page:

Linking to an email address

You can also make a special type of link that links to an email address. When clicked on, the link opens the visitor's email program so that they can send an email message to that address. This is often called a mailto link. For example:

<a href="mailto:joebloggs@joebloggsdomain.com">Email Joe Bloggs</a>

Here's that link in the page. Try clicking on it!

Email Joe Bloggs

You can even set up the link to use a default email subject, as follows:

<a href="mailto:joebloggs@joebloggsdomain.com?subject=Email from
a Visitor">Email Joe Bloggs</a>

Try clicking on this link, and you should see your email compose window appear with the email subject pre-filled:

Email Joe Bloggs

Linking within the page

You can even link to another point on the same page! This is very handy if you have a long page that you'd like people to be able to navigate around. For example, you might have an FAQ page with a list of links at the top of the page that jump to the relevant questions. (For an example of this, see our PageKits.com FAQ.)

So how is this done? If you remember, earlier we mentioned that the 'a' in the link tag stands for 'anchor'. When you link two things together on the Web, each of those things is called an anchor. The source anchor is your link tag, and the destination anchor is usually another page, or some other content.

However, it's possible to define an anchor at a certain point in a Web page, then link to that anchor. Here's how it's done. First, we define the anchor that we want to link to:

<a name="fruit-bats">Here's a bit of info on fruit bats</a>

Notice how we've given the anchor a name ("fruit-bats").

Then, we can link to this anchor from elsewhere in the page by placing a # in front of the anchor name, as follows:

<a href="#fruit-bats">Find out about fruit bats</a>

Clicking on this link would take you to the "fruit-bats" anchor.

Here's a real-world example. At the top of this page, we've made the "Making Links" heading an anchor, as follows:

<a name="what-is-a-link"><h2>What is a link?</h2></a>

We can link to this anchor now, like this:

<a href="#what-is-a-link">What is a link?</a>

Try it now - click on the link below. To return here, scroll down the page again, or click your browser's "Back" button.

What is a link?

You can also link to an anchor within another page. For example, the following HTML links to one of the questions on our PageKits.com FAQ page:

<a href="http://www.pagekits.com/faq/#howbuy">How do I
buy a PageKit?</a>

Try it out if you like by clicking the link below. (Use your browser's "Back" button to return here.)

How do I buy a PageKit?

Linking in a new window

You can make a link open in a new browser window by using the target="_blank" attribute, as follows:

<a href="http://www.google.com/" target="_blank">Visit Google</a>

Click on the link below to see it in action:

Visit Google

It's worth pointing out that opening everything in a new browser window can be annoying for visitors to your website, so use this feature sparingly and where appropriate! Also, note that the target attribute is no longer allowed in XHTML 1.0 (although it's still allowed in HTML 4).

Happy linking!

Now you know how to link to other Web pages, how to link to an email address, how anchors work, and how to link to pages in a new window. You're all set! Have a go at adding some links to your own Web page. Enjoy!

The end

That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!

Top of Page