Anchoring

Here at work I'm always starting discussions on code standards and theories. I've decided I should also be posting it here.

The old method of placing anchors on the page, <a name="anchorThis"></a>, should be thrown out the window and forgotten about. Modern day browers can use the id attribute of an element as a reference to jump too.

The beauty of the new method is that any element on a page with an ID attribute can be an anchor point on a page. Here's a really simple example:

<a href="#anchorPoint" 
title="Jump to the anchor">Jump Down</a>

a bunch of content and code before your anchor point

<div id="anchorPoint">Hey, 
that was a nice jump! Great job!</div>

When you click on the link in the above example code, you'll jump to the div element on the page. The #anchorPoint will also be appended to the URL in the browser's location bar. The div used above is just an example and any element on a page could be considered a valid anchor point as long as it has an ID attribute such as a paragraph, list item, or even an image.

If you have a link on a page that you want to anchor to a specific element on a completely different page, simply use the same code as the example above but add the URL to the new page before the hash mark.

<a href="/some/new_page.html#differentPageAnchor"
 title="Jump to the anchor">Jump Down</a>

<a href="http://www.example.com#differentPageAnchor"
 title="Jump to the anchor">Jump Down</a>

When you look at a link and you see a hash mark (#), anything that follows it refers to an element on the page. So if you were to click on the link in the code example above you would jump to - http://www.someurl.com#anchorPoint

That's all there is to creating anchors on a page. Simply choose what element you want to anchor to on the page, make sure that element has an ID, and create your link that has a href atribute of "#" + the ID of the element.

For the record, it is now considered invalid code for an anchor tag not to have a href attribute and not having a title attribute, though valid, is considered an accessibility no-no.