HTML Anchor Tag Tutorial

The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page.
The anchor tag is written like this:

<a>

The anchor tag alone won't do anything without an attribute and value, so let's look at the attributes we can use.

The HREF Attribute

To create a link, you have to know the web address of the file you want to link to, whether it's another web page of your own site, another website, or a link to file such as a PDF document, sound file, or another type of file. Suppose you wanted to link to the front page of my site. The web address is: http://www.boogiejack.com. You'd code the link like this:

<a href="http://www.boogiejack.com">Boogie Jack</a>

The href part, shown in dark blue text, is short for hypertext reference. This is the attribute that defines the address of the file you want to link to.
The equal sign always connects an attribute to the attribute's value. So in this case, href is the attribute, and http://www.boogiejack.com is the value. The value is always enclosed in quotation marks.
The Boogie Jack part, shown in green text, is the anchor text, or sometimes called the link text. This is the part of a link that is clickable.
If you link to a page on another site you need to use the full web address as shown in the example above. If you're linking to a different page on your own site you only need to use the page name and extension if the page is keep in the same directory.
For example, suppose you want to link to a page you've saved with the name of MyPage.html. You'd code it like this:

<a href="MyPage.html">My Page</a>

By linking to your own internal pages without using the full web address your pages will load faster. If you use the full web address the browser goes back out to the Internet to find your site all over again, which takes longer. If you don't use the full path the browser only checks on your site for the file.
File names, which includes the name of the web page and the extension, are case sensitive. That means you must use the same capitalization in the web address of the file that was used when the file was saved.

The NAME Attribute

The name attribute allows an anchor tag to be used to point to a specific place on a web page. You might link from the bottom of a long page to the top of the page, or link from an item in a Table of Contents to the corresponding item where it appears on the page. The syntax for using the name attribute is like this:

<a name="top"></a>  » or...
<a name="TOC">Table of Contents</a>

You can leave out the text between the "a" tags or use them to surround some text. The appearance of the text won't change unless you have defined a hover color for your links. If you have, then the text will change to the hover color when a user's cursor is on it. It will not be clickable, however, because this is not the link, this is the anchor a link will point to.
In thre first examply you would link to the top of a page from the bottom of a long page, and maybe other points in between so your visitors could jump back to the top instead of scrolling.
Or, you might place a named anchor as shown in the second example around the Table of Contents for an online newsletter, for example, then link to it from strategic places down the page so your visitors can quickly jump to the Table of Contents after reading an article.
For the newsletter example, to link to that named anchor you'd code your link like this:

<a href="#TOC">Table of Contents</a>

As you can see, it's simply a hash mark (#) in front of the actual anchor name. The hash mark tells the browser the link is on the current page.
You can also link to a named anchor on another page. The syntax for that is:

<a href="AnotherPage.html#name">Link Text</a>

That would be a page located in the same directory as the current page. You can link to anchor points on other sites (if they have an anchor point) by including the full web address of the page.
As you probably noticed, it's a normal link followed by the hash mark and the anchor name. That tells the browser to go to the other page, then to find the named anchor on that page.

The TARGET Attribute

The target attribute allows you to determine where the link will open. With a framed site, it allows you to target a link to a specific frame. The most common use is to have off-site links open in a new browser window. Here's how to open a link in a new window:

<a href="http://www.site.com" target="_blank">Link Text</a>

By adding the part in green to a link, the link will open in a new window or a new tab, depending on the browser in use and how it's configured.