While browsing the internet these days, I see a lot of this:

<body>
...
<a name="top"></a>
...
<a href="#top">- Back to Top -</a>
...
</body>

There’s an easier, better and prettier way. CSS Signatures are all the rage these days. If you’re not familiar with a CSS Signature, it’s basically nothing more than an ID on your body tag, like this:

<body id="www-domain-tld">

The fundamental purpose of the CSS Signature is to allow a user to specify style adjustments to your site in their own user style sheets. Whether or not users are actually capitalizing on this is a discussion for another day, but doing this has other benefits like having an extra id to use when dealing with CSS specificity.

Additionally, we can use this to capitalize on a little known fact about HTML and anchors: you can use anchors to jump to any element on your page with an ID attribute.

Let me repeat that: You can jump to any element with an ID attribute on any page.

Here’s an example, if you don’t believe me: Nowhere on CNN.com’s homepage will you find a link to their footer, and you’ll find no mention of <a name="cnnFooter"></a> in the code but if you follow this link to CNN you will in fact find yourself staring at the footer on the CNN homepage. This is because their footer div has “cnnFooter” “cnn_ftrcntnt” as the ID which allows me to jump directly to that element.

Oh sure, I know what you’re thinking: “Great, so how do I get this to work in IE?” Surprise: it works just fine in IE, at least as far back as IE 5.5 and maybe further. So, here we have a nice, tidy little tidbit with no cross-browser issues.

So, we can do away with the empty anchor element at the top of our pages and instead do this:

<body id="www-domain-tld">
...
<p><a href="#www-domain-tld">- Back to Top -</a></p>
...
</body>

Trying to be all kinds of accessible with the “Jump to Content” link? Try this:

<p>
	<a href="#content">- Jump to Content -</a>
</p>
...
<div id="content">
	<p>Neat, huh?</p>
</div>

Also works well on comments:

<p>
  <strong>Update:</strong>
  Based on <a href="#comment-12345">so and so's comment</a>...
</p>
...
<blockquote id="comment-12345">
  <h3>On Day X, so and so said:</h3>
  <p>Blah blah blah...</p>
</blockquote>

…and comment forms:

<p>
  <strong>2 Responses</strong>
  <a href="#comment-form">- Jump to Comment Form -</a>
</p>
...
<form id="comment-form" method="post" action="">
...
</form>

Using this approach will streamline a lot of your code, allowing you to get rid of a ton of those empty anchor elements. It also allows for greater flexibility when linking to content on other’s sites. Not to mention that using it means you can sit at the cool kid’s table.

About the Author

Over the course of 33 years, Bill Brown has lived and worked in West Africa as a Field Station Coordinator on Bioko Island in Equatorial Guinea, represented the Memorex line of consumer electronics on QVC, owned a squirrel, taught improvisation and stage combat and launched two successful improv comedy troupes. Oh, and along the way, he’s developed some websites and applications.

Self-taught with a penchant for entertaining others, Bill’s clients have included internationally renowned photographer Steve McCurry, The National Maritime Law Enforcement Academy (whose site was developed entirely in the rain forests of Bioko Island), Virtual Giving, Workforce Strategy Center and the WSC web application Pathways to Competitiveness. Bill was also a presenter at the 2008 National Association of Government Webmasters conference in Chicago, IL.

Bill is the creator of WebDevelopedia.com and is an active member of several discussion lists, including the CSS Discussion List (404 link removed 2012/09/05). When not online, Bill can be found enjoying the company of his girlfriend, Jessica and their dog, Leica (she doesn’t have a web site).

Related articles