Notice:
 
 


Replace Named Anchors With IDs

Posted By: Eric Lin
Category: Design - CSS
Tags: javascript
Posted Date: 2008-07-01 10:47 PM
No of Comments: 0
Clicks: 218
I just found out a simpler way to have named anchors for browser to jump to a particular location on a web page. It is not a new way, but it is a way that some developers might not be aware of.

This one's dead simple, but it's something I still see developers who have been writing HTML for a long time get wrong. If you want to provide links to particular spots within a page (e.g. http://www.sitepoint.com/#news), you don't need to fill your HTML code with <a name=""> tags - just use the id attribute on the elements you already do have!

In the past, if you wanted to provide a link to the 'News' section of your page, you'd have to do something like this:
<h2><a name="news"></a>News</h2>

These days, all browsers support in-page links based on the id attribute as well as the old-fashioned <a name=""> tag. So instead of the above, you can just do this:
<h2 id="news">News</h2>

A link to "#news" in this page will find either of the above example headings, but the second one is a lot neater, and also gives you the ability to apply styles to to heading based on its unique identifier if you need to.



Leave Your Comment

Please fill in your details and comment below.

What are the LAST THREE CHARACTERS you saw above?