IDs are anchors, too.

♦ Guest post by Bill Brown in HTML

Updated August 8, 2024 • 38 comments

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 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>
...
</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

Bill is the creator of WebDevelopedia.com 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).

38 responses to “IDs are anchors, too.”

Navjot Singh 2009/09/14 11:45 am

Thanks for the useful tip. Never knew of this one. It definitely helps in cleaning of code as I always kept creating named anchors when I had to use them.

Jeff Starr 2009/09/14 11:54 am

Yes, and there are often times when using an actual anchor prevents the page from returning to the actual “top” of the document, even when placed just before the <body> element. I haven’t been able to figure out why this happens on some designs, but using the id attribute always seems to work perfectly.

Dean K 2009/09/14 7:37 pm

Can someone please elaborate on “CSS Signatures”?

Is it literally changing it to:

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

or is it like:

<body id="example.com">

Is there CSS code to accompany it?

Jeff Starr 2009/09/14 8:18 pm

I think the idea is to make it easy for users to override CSS styles for a particular page or site by simply prefixing existing selectors in their custom stylesheet. For example, if I wanted Eric Meyer’s site to have a bright red background with white font, I could add the following to my browser’s custom stylesheet:

#eric-meyer-com { background: #cc0000; color: #fff; }

The use of the domain name as the “CSS signature” makes it easy modify any styles while keeping things organized in the stylesheet according to domain.

As for the format of the signature itself, your second example is incorrect because periods are invalid characters for CSS selectors. Hyphens are legit, so we use them in place of periods to segment the domain name.

Vijay Padhariya 2009/09/14 10:45 pm

Greate post dude, Its very very useful, I will now cleanup my code regarding this,

Thanks,
Vijay

eric 2009/09/15 12:08 am

I use for the site signature, which then lets me use to apply different styles to different sections of the site (eg. all pages within support have )

eric 2009/09/15 12:09 am

/sigh

<html id="www-sitedomain-tld">

and

<body id="support-section">

(where’s the preview option?!?)

Helen 2009/09/15 4:27 am

I know what Jeff is talking about in comment #2. In some designs,

<body><a name="top" rel="nofollow"></a> ...

doesn’t scroll to the very top of the page, because the a-tag is an inline element. Following directly after the body-tag it will be placed by the browser automatically. And if you have positioned or floating divs in the document, it can happen by obscure browser-rules (float and vertical-align) that the a-tag is not placed at the top of the layout though it is at the top of the mark-up. You probably won’t take notice of it, because it is not visible in the layout.

You can then try to position the a-tag absolutely (top=0) via CSS. But Jeff is right: <body><a name="top" rel="nofollow"></a> ... does not validate because it is an inline element outside a div (body and html are divs too, but that doesn’t matter here) and it is a piece of behaviour-code that does not belong in the mark-up.

But there is a problem: If you are running a website with one single CSS-file enhanced by body-id’s and real cascading (e.g. body#index #page #article #p versus body#subpage #page #article #p), those id’s cannot be called “top”. But smart scrolltop-javascripts are using the common “name=top”. A dilemma. One way could be:

<body id="index" name="top">

Here, “id” is dedicated to CSS, and “name” is dedicated to the scrolltop-javascript (works well without JS).

Catherine Azzarello 2009/09/15 7:54 am

Way cool!

And now that I can sit at the cool kids’ table…what’s for lunch?

Thanks for the tip.

Max Weaver 2009/09/15 1:30 pm

You seem surprised that Anchors can do this. But is there any other use for Anchors? I am not sure what else they can be used for other than jumping to specific areas of a page.

It’s been that way for as long as I can rmemeber, at last since the late 90’s.

By the way, they don’t work on Safari.

Max

Helen 2009/09/16 3:02 am

Max, the article is not about the fact that anchors exist. It is about that they are still in use today. I just tried it in Safari. Works great.

Chris McCorkle 2009/09/16 5:25 am

Not too shabby. Looks like it’d work well for going back to top… and also the relative location of divs with ids?

Comments are closed for this post. Something to add? Let me know.

Navjot Singh 2009/09/14 11:45 am

Thanks for the useful tip. Never knew of this one. It definitely helps in cleaning of code as I always kept creating named anchors when I had to use them.
Jeff Starr 2009/09/14 11:54 am

Yes, and there are often times when using an actual anchor prevents the page from returning to the actual “top” of the document, even when placed just before the <body> element. I haven’t been able to figure out why this happens on some designs, but using the id attribute always seems to work perfectly.
Dean K 2009/09/14 7:37 pm

Can someone please elaborate on “CSS Signatures”?

Is it literally changing it to:

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

or is it like:

<body id="example.com">

Is there CSS code to accompany it?
Jeff Starr 2009/09/14 8:18 pm

I think the idea is to make it easy for users to override CSS styles for a particular page or site by simply prefixing existing selectors in their custom stylesheet. For example, if I wanted Eric Meyer’s site to have a bright red background with white font, I could add the following to my browser’s custom stylesheet:

#eric-meyer-com { background: #cc0000; color: #fff; }

The use of the domain name as the “CSS signature” makes it easy modify any styles while keeping things organized in the stylesheet according to domain.

As for the format of the signature itself, your second example is incorrect because periods are invalid characters for CSS selectors. Hyphens are legit, so we use them in place of periods to segment the domain name.
Vijay Padhariya 2009/09/14 10:45 pm

Greate post dude, Its very very useful, I will now cleanup my code regarding this,

Thanks,
Vijay
eric 2009/09/15 12:08 am

I use for the site signature, which then lets me use to apply different styles to different sections of the site (eg. all pages within support have )
eric 2009/09/15 12:09 am

/sigh

<html id="www-sitedomain-tld">

and

<body id="support-section">

(where’s the preview option?!?)
Helen 2009/09/15 4:27 am

I know what Jeff is talking about in comment #2. In some designs,

<body><a name="top" rel="nofollow"></a> ...

doesn’t scroll to the very top of the page, because the a-tag is an inline element. Following directly after the body-tag it will be placed by the browser automatically. And if you have positioned or floating divs in the document, it can happen by obscure browser-rules (float and vertical-align) that the a-tag is not placed at the top of the layout though it is at the top of the mark-up. You probably won’t take notice of it, because it is not visible in the layout.

You can then try to position the a-tag absolutely (top=0) via CSS. But Jeff is right: <body><a name="top" rel="nofollow"></a> ... does not validate because it is an inline element outside a div (body and html are divs too, but that doesn’t matter here) and it is a piece of behaviour-code that does not belong in the mark-up.

But there is a problem: If you are running a website with one single CSS-file enhanced by body-id’s and real cascading (e.g. body#index #page #article #p versus body#subpage #page #article #p), those id’s cannot be called “top”. But smart scrolltop-javascripts are using the common “name=top”. A dilemma. One way could be:

<body id="index" name="top">

Here, “id” is dedicated to CSS, and “name” is dedicated to the scrolltop-javascript (works well without JS).
Catherine Azzarello 2009/09/15 7:54 am

Way cool!

And now that I can sit at the cool kids’ table…what’s for lunch?

Thanks for the tip.
Max Weaver 2009/09/15 1:30 pm

You seem surprised that Anchors can do this. But is there any other use for Anchors? I am not sure what else they can be used for other than jumping to specific areas of a page.

It’s been that way for as long as I can rmemeber, at last since the late 90’s.

By the way, they don’t work on Safari.

Max
Helen 2009/09/16 3:02 am

Max, the article is not about the fact that anchors exist. It is about that they are still in use today. I just tried it in Safari. Works great.
Chris McCorkle 2009/09/16 5:25 am

Not too shabby. Looks like it’d work well for going back to top… and also the relative location of divs with ids?

1234 • Newer Comments »