Best Practice In-Page Jumps

Hyperlinks to locations on the same web page are handy for long, scrolling pages. A common way to achieve this is to place a named anchor at the jump locations, and link to them using the # symbol.

<a href="#jumpName">Link to subtitle</a>

... some content ...

<h2><a name="jumpName">Subtitle</a><h2>

This surfaces a potential styling conflict when CSS is applied to <a> (anchor) tags. Let's say you apply a hover state to all anchor elements in your page... Your jump location will be styled with the hover state, even though it's just a reference and not an actual link.

Solution:

The HTML 4.0 spec provides an alternative to using <a name="something"> for your jump references, by allowing links to reference ID attributes instead:

<h2 id="jumpName">Subtitle<h2>

Specify your link in the same manner as above, by linking to #jumpName, and Bob's your uncle... potential CSS styling conflict solved.

Link: http://www.w3.org/TR/html401/struct/links.html#h-12.2.3

EDIT: This method is only supported on "modern browsers". So anyone who cares about people still using Netscape Navigator 4.x or an ancient version of IE (IE 4 or older) should still use <a> jumps. That said, the name attribute has been deprecated in XHTML 1.0...