HTML <a> anchor Tag Reference

The <a> HTML/xHTML tag

The  <a></a> tag stands for "anchor", but it may as well mean "link", because 99%+ of the time that's what it's used for. ("Anchor" is an anachronysm from the first version of HTML.)

The <a> tag is valid in all current versions of HTML and xHTML, and it should always have a closing </a> tag, even when just used to create an anchor point.

When to use the <a> tag (semantic use)

Using the <a> tag to create links

When wrapped around some HTML code, and given an  href="" attribute, the <a> tag creates a hyperlink.

Any text or other HTML elements between the <a> and the </a> then become the clickable active hyperlink.

The target of the link is defined by the  href="" attribute, which can point to lots of different things:

A different web site, using the full domain name

e.g. <a href="http://webdesignfromscratch.com/">Visit this great site</a>

A page on the same site

e.g. <a href="/about-us/index.html">About Bloggs &amp; Co.</a>

A page on a different site

e.g. <a href="http://webdesignfromscratch.com/html.cfm">Introduction to HTML</a>

A directory, rather than a page (where the server will serve up the default page, usually called index dot something)

e.g. <a href="products/">Our Products</a>

A specific point on the current page

e.g. <a href="#summary">See the summary</a>

A specific point on a different page/site

e.g. <a href="http://blah.com/about-us.php#theboard">Blah.com's board members</a>

The top/root of the current site

e.g. <a href="/">Home page</a>

The default page in the current directory

e.g. <a href=".">Back to menu</a>

Back up a directory

e.g. <a href="../">Back to products</a>

You can string these together to back up two or more directories, and also link to a specific page

e.g. <a href="../../other_page.php">Main menu</a>

You can even run client-side code from within a link, but this is not recommended (the best way is to use event handlers attached to elements at runtime)

e.g. <a href="javascript:alert('Hello World!');">Show a message</a>

Using the <a> tag to create anchor points

If you want to link to a different point on a page, such as:

• linking from a list of headings at the top of the page to a point lower down, e.g. <a href="#resources">More nots in resources section</a>
• linking to the top of the page, e.g. <a href="#top">Back to top</a>
• or skipping navigation (useful for accessibility), e.g. <a href="#maincontent" accesskey="s">Skip navigation</a>

... then you will first need to have created an anchor point on the relevant page (doesn't have to be on the same page) to link to.

There are two ways of doing this:

• The more familiar (old) way is to use the <a> tag without the href="" attribute but using the name="" attribute instead, e.g. <a name="top"></a>. (Note that I've included the </a> closing tag, even though there's no content between the pair.)
• A better way, though, is simply to give the target element the same ID, e.g. <div id="top">. This is better because there invariably already exists an element at the right point, whether it's the top of the page, a heading lower down the page, or the <div> that holds the main content, and why use extra tags when there's something there already to do the job?
  

Useful parameters

Accesskey parameter

Used for assigning a shortcut key to a link, which is really useful for people who may be browsing your pages with an aural (text-to-speech) browser.

A very common shortcut is "Skip navigation", typically assigned to the "s" key, which you hit when you first arrive at a page on a site where you know the shortcut is in use, to avoid having to listen to all the navigation every time.

To activate a shortcut key, you normally hit Alt+key on some PC browsers, but some use Alt+ Key then Enter. On Macs, the Ctrl key is used.

The main problem with shortcut keys is that there's no agreed international standard (partly because we use different languages in different parts of the world!). A good starting point is the UK Government standard, which I implemented on the HMRC web site.

Target parameter

Used for telling the link to open in a different frame (when using framesets).

Title parameter

A way of adding a descriptive meaning to the link. This is good for usability, accessibility, and search engine optimisation.

• Usability is enhanced because the link can say more about its target than the link text contains (usually by showing a tool tip in visual browsers).
• Accessibility is improved by aural browsers reading out the title property in addition to the link text.
• SEO benefits by adding more descriptive keywords without having to clutter the visual page.

Note that you don't need to use a title parameter if the contents of the link (i.e. the link text) describe accurately what the link points to (i.e. what you'll get, where you'll go, what will happen). There's no benefit to reproducing the link text in the title tag.

Notes on the <a> tag

<a> should not contain block-level elements

I have no idea why this should be the case, but I heard it somewhere. Apparently, you can't put any block-level element inside <a> ... </a>  tags. That means no <div> tags inside anchors, or tables, or lists, or list items.

However, you can make an anchor block-level itself. That means

Example of <a> tag use

Show one or more examples.

Alternatives to the <a> tag

You may also consider using:

Client-side image maps, including <area> tags

Only for complex situations where you have an image with lots of clickable areas, or irregularly-shaped hotspots. But I'd recommend avoiding this approach wherever possible!

Use id property with existing elements in place of the <a> tag for anchor points

For the reasons described above.

• Basics
• Design process
• Opinion
• Business
• Goal-oriented design
• Graphic design
• Site architecture
• Accessibility
• Usability
• Copy writing
• Production
• HTML
• CSS
• JavaScript / DHTML
• Recommended

• Recommended
• NEW ebook "Save the Pixel - the Art of Simple Web Design"
• Buy our PDF ebooks
• Compare web hosts - speed, uptime, support etc...
• Custom logo design services
• Support this site