Tutorial: HTML Links for Beginners
Level: Beginner. Published on 2 December 2004 in HTML
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...
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.
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. More on that later!) 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 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:
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!
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:
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. (For an example of this, see our PageKits.com FAQ.)
So how is this done? If you remember, the 'a' in the a 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 a 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.
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.)
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:
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).
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 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!
Share and enjoy
If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:
Link to this page
Feel free to link to this article in your own Web pages. Click one of the boxes below to select the text, then copy and paste it into your page:
Keep in touch
Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.
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 need help with a Web-building issue, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!
