The <a>, anchor tag is used to make a click-able link to any file on the internet, if your browser does not support a file type, it will download it. This tag can be used in a number of different ways, on this page I will describe each way the anchor tag can be used with examples and supporting information. The a (anchor) tag is common referred to as a link or hyperlink and of course an anchor. It can be styled using css pseudo-classes for hover, visited and active effects. On this page I will cover everything you need to know about the anchor tag in detail, with the exception of image maps which gets it's own page.

The syntax of the anchor tag

There are boundless ways to have your anchor tag and the attributes can be ordered in any way, as long as they're in the opening tag. However, there is a basic syntax to the anchor tag and that is as follows:

<a href="http://www.html-tips.net">HTML Tips</a>

As you can see, the anchor tag has an opening and closing tag, surrounding the link text. The link text "HTML Tips" will be displayed and the URL of what is set in the href attribute will be where your link goes. The example above will link to http://www.html-tips.net with the text displaying as "HTML Tips". Just like this: HTML Tips

Internal linking with the anchor tag

There are two ways to link using the anchor tag. There is the external or 'full' address way which is just the address of a website including the http://, domain name and any file or directory name needed. For example: http://www.html-tips.net/html-tags/ is a full address. The other way is called internal linking, this way of linking allows you to define a link URL without http:// or a domain name, for example href="filename.html". This is used when you're linking to a file on the same domain name, to do this correctly there is a few small techniques you need to know:

Linking to page.html, from http://domainname.com/index.html

When linking to a document that is in the same directory as your current document, simply use the file name.

<a href="page.html">Page</a>

Linking to page2.html in directory 'directory', from http://domainname.com/index.html

If you're linking to a document inside a directory that is above your current directory you can simply type in the path.

<a href="directory/page2.html">Page2</a>

Linking to index.html, from http://domainname.com/directory/page2.html

When linking to a document in a directory that is below the current directory, you just need to add '../' to the href attribute. If you're two directories above the document you want to link to, you can add a another '../' to the href attribute and it will go back two directories, this can be done multiple times, for example: ../../../ would go back three directories.

<a href="../page.html">Page</a>

Using the anchor tag for a bookmark link on a page

Using the anchor tag for bookmarking on a page is very useful. A bookmark link is a link that will take the page down or up to where the bookmark is anchored. You may have seen sites with "return to top of page" before, this is an example of bookmark linking, another example is wikipedia pages, how they have the links at the top for each section. There is two parts to bookmark linking. There is the link to the bookmark anchor and the bookmark anchor itself. First off I will start with the bookmark anchor:

The bookmark anchor defines the position the browser should scroll to when the link is clicked, this can be both up or down. To define this you can use either a name attribute on an anchor tag, or an id attribute on any html tag that allows the use of the id attribute (most tags). Id and name attributes can be used for many links but make sure you only define an id or name once, as you can not have two places for the bookmark link to go to on one page.

Creating a bookmark anchor

To define a bookmark anchor using a name attribute on the anchor tag, simply do one of the following:

<a name="bookmark"></a>

Defining a bookmark using an id attribute is shown below, the id attribute can be used on many different tags.

<h2 id="bookmark">The thrid title of a page</h2>

Linking to a bookmark anchor

To link to a bookmark anchor, you can simply do a normal anchor tag, but define the value of the href attribute to the id or name of the bookmark anchor with a hash symbol infront of it; #bookmark. For the above examples I would write my link as:

<a href="#bookmark">Go to the third title on this page</a>

How to open email using an anchor

To open an email client with an anchor, all you have to do is add 'mailto:' to the href attribute and then an email address straight after that. This will open the users email client and place the specified email address nicely in the "To:" field of the email client. Here is an example of a mailto anchor:

<a href="mailto:SomeEmailAddress321@SomeDomainName.com">Email Me</a>

Example of the anchor tag

You can edit this example to produce any form of the anchor tag.

Code

Preview

Attributes of the anchor tag

The anchor tag has many attributes, most can be used with every document type, but there is one that can not be used with a strict document type. Here are all the attributes for the anchor tag:

Attributes that can be used with the Strict, Transitional, and Frameset document types

• href - This attribute defines the URL of where the web browser should go when the link is clicked.
• charset - Defines the character set of the document that is being linked to.
• hreflang - Defines the language of the document that is being linked to.
• name - Sets a name of an anchor, this can be used for multiple links to a bookmark style link within a document.
• rel - Defines how the current document relates to the linked document.
• rev - Defines how the linked document relates to the current document - this is the opposite of rel.
• coords - Sets the coords of a link, this is primarily used with image maps.
• shape - Sets what shape should be used to make the link. This shapes size and position is defined by the coordinates. See image maps.
• type - Defines the mime type of the document that is being linked to.

Attributes that can be used only with the Transitional, and Frameset document types

• target - The most common use of this attribute is to open a link in a new window, to do this use "_blank" as the value other values you may use are: _parent, _self, _top and the 'name' of a frame.

Common attributes for the anchor tag

Details for Common html Attributes.

Javascript event attributes for the anchor tag

Details for Javascript Event Attributes.