HTML Links for Beginners

Learn how to link HTML pages using text links and image links. Also shows you how to link to email addresses in your Web pages.

HTML links allow one Web page to link to other related pages. They can use text or images to link to other Web pages or even an email address. If you're new to Web building and you're not sure how links work in HTML pages, this tutorial is for you! Read on...

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.

Making text links

The HTML tag that you use to build links is called the <a> tag. ('A' is short for 'Anchor', by the way.) Here is some HTML to build a link to this site's homepage:


<a href="http://www.elated.com/">Visit Elated</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 Elated

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


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

The HTML a 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.elated.com/. The text between the quotes (http://www.elated.com/) is called a URL.

Handy tip

You can get the URL of the page that you want to link to by browsing to that page in your Web browser, then copying and pasting the URL from the address bar at the top of the browser window.

Next, we have:


Visit Elated

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!

Making image links

The above example used a piece of text ("Visit Elated") for a link. In fact you can put anything you like between the <a href="..."> and </a> tags. Often, HTML images are used to make links.

Here's an example that uses an animated button image for the link:


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

Here's how that looks in the page:

HTML link using an image

Using mailto: links

You can also make a special type of HTML 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

Adding links to the same HTML 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.

So how is this done? First, add an id attribute to the element you want to link to:


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

Then, you can link to this element from elsewhere in the page by placing a # in front of the element's ID, as follows:


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

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

Here's a real-world example. At the top of this page, we've added an ID to the "What is an HTML link?" heading, as follows:


<h2 id="what-is-a-link">What is an HTML link?</h2>

We can link to this heading 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 element within another page. For example, the following HTML links to an element within an imaginary FAQ page on example.com:


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

Opening a link 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.elated.com/" target="_blank">Visit Elated</a>

Click on the link below to see it in action:

Visit Elated

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 isn't allowed in XHTML 1.0 (although it's still allowed in HTML 4).

The target attribute is also used for linking between HTML frames.

Happy linking!

Now you know how to use HTML links to link to other Web pages and email addresses, how to link within the same page, 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!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page