The Basics of Building Links with HTML

What is a link?

A link refers to a string of text– or a graphic– on a Web page, that when clicked, will lead you to a different page on the site, a different section of the same page, or to a different Website. The word, phrase or image that is turned into a clickable link is called anchor text.

Types of Links

There are three common types of links used in Web design.

• Inbound Links are links that point from someone else’s site to yours. In other words, one way links into your site. The benefits of having a lot of quality inbound links to your site is crucial for raising your site’s Page Rank as well as its Search Engine ranking. In addition, all inbound links should be created using keywords as anchor text.

• Outbound links are links that point out from your site to someone else’s website. Use caution when linking to other sites from your own, and always ensure that the outbound links you use provide value to your visitors and point to only non-competing Websites. Always use nofollow attributes when linking out of your site unless you want to pass along some Page Rank to the site you are linking to. More about the nofollow attribute below

• Internal links are links that link to pages within your own Website. For example, linking to your home page from other pages on your site is considered internal linking. All internal links should be created using keywords for the anchor text to help optimize your pages for higher Search Engine rankings. When linking to pages such as a disclaimer, privacy policy, or other page that you don’t want to rank for in the Search Engines, use a nofollow attribute in the link.

How to Build an HTML Link Using Anchor Text

There are three main parts to an HTML link.

• the tags that alert Web browsers to the fact that the link is a link

• the URL that points to the page you wish to link to

• the text you wish to use as your anchor text

To demonstrate each part of a link, take a look at the examples below. The tags used to tell the browsers it is a link are in bold black type, the url is in red, and the anchor text is in blue.

This is an example of an HTML text link that points to the home page of a site

<a href="http://www.website-name.com">Anchor Text</a>

This is an example of an HTML text link that points to an interior page of a site

<a href="http://www.website-name.com/page-name.html">Anchor Text</a>
 

What is the NoFollow Attribute?

Adding a nofollow attribute to your HTML link tells the Search Engine robots that the link is not approved. This means the Search Engines will follow the link, but they will not consider it relevant when assigning Page Rank or link popularity to the site it links to.

How and When to Use the NoFollow Attribute

The nofollow attribute should be used when you link to affiliate sites, when selling ad space on your site, or when you need to link to a page on or off your Website that you don’t want to pass any Page Rank to.

Adding the nofollow tag to HTML links is simple. The examples below demonstrate a link with and without the nofollow attribute.

A link without the nofollow attribute looks like this…

<a href="http://www.website-name.com/">Anchor Text Here</a>

A link with the nofollow attribute attached looks like the following…

<a href="http://www.website-name.com/&quot; rel="nofollow">Anchor Text Here</a>

How to Use a Link to Jump to Another Section on the Same Page

There are two parts to using links to jump to new sections on the same page. Whether you want to place a link at the bottom of the page to return visitors to the top or you want to link to a specific section of the page for visitors looking for certain information or details, the process is the same.

Example of the link:

<a href="#anchor-name">Your Anchor Text Here</a>

The "#anchor-name" can be anything you want it to be. I generally use a single word as close to the anchor text as possible.

The replace Your Anchor Text Here with the anchor text you want to use for the link.

Now that you have the link formatted, it’s time to make the anchor that the visitor will return to. It looks like this:

<a name="anchor-name">Your Anchor Text Here</a>

Replace "anchor-name" with the exact same word you used in your link, without the #

The text you will place within the tags to replace Your Anchor Text Here should be a word or words from the specific section of the page you want to link to.

For example, if you have written a page about monarch butterflies, and you want a link to jump down the page for visitors looking specifically for monarch butterfly pictures. Your link and anchor might look like the following.

This is the link

<a href="#gallery">monarch butterfly gallery</a>

This is the Anchor for the link

<a name="gallery">Monarch Butterfly Gallery</a>

While basic link creation is easy, it’s often just as easy to forget the important role they play in building a successful presence on line. And even more important is the practice of using proper anchor text, whenever possible, in all the links you build.  

Using relevant keywords as anchor text is the single most beneficial link building strategy you can use to boost site rankings, link popularity, and overall Website traffic.