Links are the the foundation of the web. Without them, the web wouldn’t exist, or at least it wouldn’t be nearly as powerful and convenient as it is now. Can you imagine trying to manually keep track of everything cool that you had ever visited? How on earth would you learn about new sites?

This tutorial will explain the most basic parts of creating links. Linking strategies, how links relate to Page Rank, navigation schemes, etc., will be discussed later.

Select The Content of the Link

The first thing to do is to select the content you would like to turn into a link—the words or image that you would like people to click on with their mouse.

For example, in the next paragraph, we have decided that people should click on semantic web in order to get to Ara’s blog post about semantics on the web.

To do this, you need to use anchor tags. These are tags that have two purposes—they are used for making links and making anchors. We are using the link ability of an anchor tag. Anchor tags look like this: <a> and the closing tag, </a>. Simply surround the text or image tag that you want to be a link with the anchor tags. From our earlier example, you get this:

Tell Your Link Where to Go

Now that we have something that your site visitors can click on, we need to include the information that tells the link where to go. We do this by inserting the href, or HTML reference, attribute into the opening anchor tag. An href attribute contains the URL for the page we are linking to. For example, if you wanted to link to The Lime Blog, you would have anchor tags that look like this:

Resulting in:

The Lime Blog

Our earlier example turns out like this:

And appears like this on the page:

I learned some really cool stuff about the semantic web over at Ara Pehlivanian’s blog.

Describe What Your Link Points At

The final step to creating your link is to further describe the content that it points at. This step is optional, but sometimes “semantic web” or whatever the text may be isn’t enough information for people to understand what you’re linking to. This is especially true with navigation links—”services,” as an example, doesn’t tell you much and needs to be spiced up. Include the title attribute in your links so that people have more information about where they’re going (The text will appear when people hover over your link).

Here’s our example with a title attribute included:

And appears like this on the page:

I learned some really cool stuff about the semantic web over at Ara Pehlivanian’s blog.

Now that you have learned how to link, you can go link your pages together and link to other good sites on the web.