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…
What is an HTML 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.
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.)
Notice that there are several parts that make up this link. Let’s take a look at these parts now.
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.
Next, we have:
This is the text that we want to turn into a link.
Finally, we have:
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:
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:email@example.com">Email Joe Bloggs</a>
Here’s that link in the page. Try clicking on it!
You can even set up the link to use a default email subject, as follows:
<a href="mailto:firstname.lastname@example.org?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:
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
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.
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:
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!