Creating Links in HTML

In this lesson, we will learn about creating links in HTML. Text and Graphic links are very important in a web page. We will cover text links in this lesson and in the next lesson, we shall learn about graphic links.

Links are part of the name of HTML - they are hypertext. Without links, there wouldn't be much point to having HTML. Also, a page without links and that is not linked to is unlikely to be listed in Google.

There are three basic types of links:

  • Links to pages in your own website, under the same domain name
  • Links to pages outside your website
  • Links to anchor points on the same page. A good example of this is in Wikipedia's menu, where clicking on a subsection takes you further down the page to the appropriate topic.

You can create links using text or images; when you use text, the words that make up the link are called "link anchor text," often shortened to just "anchor text."

Links are always started with <A>, ended with </A>. In most cases, you'll see that they start with <A href="">, with a web address inside the quotes. (Href means hypertext referral, and A means anchor.)

Internal Links

When you link to a page within your own website, the URL is similar to that of your own page. Just as you would not give directions to your neighbor's house from your home starting "Go to Wisconsin, then to Massagoula," you don't need to specify the whole URL for an internal link. You're already halfway there, and you only have to define the short distance from your page to that.

Your internal link, if the page is in the same directory as the page you're referring from is simply formattted like this:

<A HREF="pagename.html">Anchor Text</a>

This is called a relative link, because the location is relative to the page that you are currently viewing. Pages in your own site can be linked to without the HTTP or other URL data - only using the raw file name. If the pages are under a different directory, you'll need to specify directories as well:

<A HREF="content/pagename.html">Anchor Text</a>

However, in this case you may have an error. If the page is outside the directory of the referring page, it should probably use the complete URL.

The words you use for your anchor text, by the way, are important because they play a part in determining where the page linked to is ranked by Google. Try to use keywords that are associated with the target page for best results - for example, if you're sending your viewers to a page about teddy bears, make Teddy Bears the anchor text.

Outbound Links

These links are identical to the internal links discussed above, except you'll need all the URL inside the referral variable:

<A HREF="http://www.yahoo.com">Yahoo! site</a>

Anchor Links

If you're linking to another part of the page you're on, you'll need to use an anchor link.

Anchor links require two different pieces: a named anchor on your page, and then a link that can target that anchor and bring the browser to it quickly. It is wise to insert links in the title sections of very long pages even if you don't intend to use them yourself.

A named anchor looks like this:

<H2><A NAME="Types">Types Of Links</A></H2>

The variable for NAME can be anything you like, but it's smart to keep it closely relevant to the anchored text.

Now you'll need to call this anchor with a link to it:

<A HREF="#Types">Types of Links</A>

If you were calling this specific section from another web page, your link would look like this:

<A HREF="http://www.yoursite.com/htmlcodes.htm#Types">Types of Links</A>

See how that works? It simply adds one more bit of direction to the URL you're already using.

Try This:

In a new page saved in the same directory as your old working page, create links of all four types: internal site links, outbound links, internal anchor links, and anchor links to another page. You'll have to create an anchor on the old page in order to refer out to an anchor link on it, so keep that in mind.

You'll very quickly see that using an anchor link on a page that is outside your own site is nearly impossible. To try it, you can go to Wikipedia, look something up, and then click one of the links in the contents box. You'll see, as your browser jumps to the appropriate location on the page, that an anchor link appears in the address bar. This is the only way to easily find an anchor link on another page, unless the page creator tells you where it is.

After learning this lesson about creating links in HTML, let us move on to the next tutorial which talks about graphic links.