HTML Anchor Tag Tutorial

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

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 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 the first example 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

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.

Based on your interest in this tutorial, you may also be interested in these related tutorials:

• Server Paths Explained
• Using Images for Links
• Link Balloons on Hover