HTML 3: Links

One of the most useful HTML tags is <a>, which allows you to turn text or even images into links. To specify the destination of the link, you use the href (hypertext reference) attribute as follows:

<a href="destinationURL">Link Text</a>

You can write a full URL (e.g. href="http://www.website.com/") or a local link (e.g. href="pagename.html") if you are linking to a page within your website. For instance, if your website is http://www.website.com and you want to write a link to http://www.website.com/pagename.html, you could use a local link to pagename.html and not worry about the http://... part.

You can control the color, hover color, and more with CSS (see CSS tutorials). Based on my CSS, this link appears as:

Link Text

By default, a link opens in the same tab or window. For the best user experience, you want links to pages within your website to open in the same tab and links to outside pages to open in a new tab. You can control if the link opens in the same tab or a new tab with the target attribute.

<a href="URL" target="_self">Opens in same tab/window (default)</a>
<a href="URL" target="_blank">Opens in new tab/window</a>

If you have a long webpage, it may be useful to link to a specified point in the same webpage (e.g. "Return to top"). First, you need to create a bookmark at the link destination using the id attribute. You can name it how you like.

<p id=bookmark">Position</p>

Then you can write your link to the bookmark:

<a href="#bookmark">Return to Position</a>

To turn an image into a link, replace the link text with an image. The next tutorial will cover the <img> tag.

<a href="URL"><img src="image1.jpg" alt="Image 1"></a>

HTML 2: Text Effects HTML 4: Images

© 2006-2023 AnnaNeo/Anna Perkins Art