Tutorials - HTML - Links

The internet is built on links. The earliest version of Google had only one ranking factor: how many people linked to you, and how many people linked to them (their "authority"). It's become a lot more complicated now, but the internet is still the same, everyone moves through links. Luckily, adding links in HTML is still easy! You can add anchor links to any text or images on your page (and sometimes other element to, but we'll look at that later). To do this, you wrap the content in an <a> tag.

Hypertext REFerence (href) Attribute

This is the most important attribute of the <a> tag, as it tells the browser where it should go. This can be any relative or global URI, and you can also use local anchors within your page, using the # symbol.

<a name="anchorname"> </a> <!-- This will place an anchor on the page called "anchorname" -->

<a href="#anchorname"> </a> <!-- This will link to the anchor called "anchorname -->

<a href="/images/bridge-in-london.jpg"> </a> <!-- Relative link based on webroot -->

<a href="http://www.google.com"> </a> <!-- Global link -->

Target Attribute

You can also set the target for your links within the <a> tag.

target="_blank" - Open the page in a new window
target="_self" - Open the page in this window
target="_parent" and target="_top" - Used with frames, we will see why these should not be used later in our tutorials

Here is an example:

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

Google

Images as links

Adding links to images is exactly the same as adding links to text, which is what makes it so easy. Just wrap your <img> element in your anchor tags, and you're done! Here is an example

<a href="/images/bridge-in-london.jpg" target="_blank"><img src="/images/bridge-in-london-thumbnail.jpg" /></a>

Download links

Download links are no different to normal links, just set the target of your anchor tag to the file you want your users to download. Files which can be automatically handled by the browser will be displayed in the browser, and files which the browser cannot automatically handle will be downloaded to the user's hard-drive.

Base (default links)

In your <head> element, you can use the <base> element to give all links on your page a default value - you may find this useful if you use a lot of placeholder links, or if you generate links with a scripting language and want to make sure your links do something - even if your code or data goes wrong.

<head>
    <base href="http://www.openzu.com" />
</head>

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.