New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

IDs are anchors, too.

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

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

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 is an example, if you don’t believe me. Nowhere on the Perishable Press homepage will you find a link to the footer section. And you will find no mention of <a name="footer"></a> in the code. But if you follow this link to Perishable Press, you will in fact find yourself staring at the footer of the homepage. This is because the footer section (<div>) includes “footer” as the the ID attribute, 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>

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

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

Also works well on comments:

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

…and comment forms:

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

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.

Bill Brown
About the Author
Bill is the creator of and is an active member of several discussion lists, including the CSS Discussion List. 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).
The Tao of WordPress: Become your own WordPress guru.

38 responses to “IDs are anchors, too.”

  1. Is it possible this doesn’t work in FF on Mac? I’ve tried your CNN link and it just opens up as it would have with a nornal link to it… no sign of a footer here (unless i scroll down manually of course).

  2. @Sunny
    The whole point of using your domain name as body id is to create consistent “CSS Signature” for your whole site, so people may override your site style with their browser user.css (or Greasemonkey, or whatever).


    #www-myunv-com p {
    font-size: 46px; /* because I'm shortsighted */


  3. Ron oerlemans 2010/01/05 9:39 am

    This doesn’t work in IE8 anymore..

  4. Bill Brown

    @Tricia: Thanks for the heads up – I have updated the article with the new information.

  5. I also find id-based page anchors handy when doing front-end builds. For example, if you’re quickly iterating the CSS for the footer of a site and refreshing the browser often, you can put the ID in the URL like And when you refresh the browser you don’t have to bother with scrolling down to the footer – the browser just jumps down to it.

  6. Bill Brown

    @Andy: Very nice tip :)

  7. Oh…and I probably should have added…thanks for the article, I thoroughly enjoyed it. ;)

  8. Really very useful! I had no idea and feel a little bit ashamed that I never knew as it feels incredible obivous. Good to learn something new, cheers!

  9. Bill Brown

    @Tricia: Thanks for helping to make it even better :)

    @Jaina: I felt the same way when I first discovered this. Good to hear I’m not the only one :)

  10. Theresa Kilcourse 2010/02/03 9:16 pm

    Wow, I can’t tell you how much I appreciate this. Thank you.

  11. I want to link to the “passage_heading” div element on this Bible Gateway page:;version=NIV&amp;interface=print#passage_heading

    You see, I want it to jump to the “passage_heading” element of the page, but it won’t. Actually I tried many element ID’s for the anchor and they didn’t work. The only one I found that worked is the anchor “niv-info”:;version=NIV&amp;interface=print#niv-info

    That one works. But again I want to link to the “passage_heading” anchor.

    Can anyone help?

  12. Bill Brown

    Hi Ed, it looks like it’s working in Firefox.. did you find a solution?

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.