IDs are anchors, too.

♦ Guest post by Bill Brown in HTML

Updated February 5, 2020 • 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.”

Jeff Starr 2009/09/16 9:38 am

@Helen: Thanks for the information and insight. This will give me something to refer to the next time I am dealing with unruly anchor behavior. Note that the name attribute is deprecated in XHTML in favor of id. Using name for scrolltop scripts with HTML is a nice workaround when id is reserved for styling. Thanks :)

@Max Weaver: I don’t think anyone is surprised at the idea of anchors, but replacing them with ids for intra-page navigation may not have been realized by the wider design community. And yes, as Helen points out, anchors work fine in Safari, as do ids used as anchors.

@Chris McCorkle: Absolutely. As mentioned in the article, any element that accepts the id attribute can be referenced and used for intra-page navigation. So comments, quotes, forms, divs, and just about anything else that is needed.

Mark 2009/09/17 10:28 am

Anchors have another use in our web-oh-two/RIA/ajaxy times. The problem is seen when you change the content of a page dynamically, eg. by use of AJax, and then the user wants to either

i) Book mark the page
and/or
ii) Refresh the page.

In both of these scenarios, on reload, the original, unchanged webpage will be seen.
One solution is to use and manipulate anchors, specifically the URL string to ‘remember’ the dynamically generated content.

The key is the little known or used javascript attribute ‘document.location.hash’ which is read/write access to the URL after the ‘#’ (That’s a HASH, not a Pound – I’m English dammit!).

Here’s a good enough example of it’s use – enjoy!

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Mark 2009/09/17 10:39 am

I didn’t know about CSS signatures – Cool idea I just implemented it on scamdex.com:

(Not that I will ever see anyone using it :'( )

Eric Meyer is my Hero!

Helen 2009/09/20 3:04 am

I’ve found a wonderful piece of jQuery that I’ve been using for a while now. Don’t remember the author’s name, sorry! Scrolling smoothly, using name="top", so you can set id attributes. Finally, it rewrites the pathname, so the visitor won’t end up with pagename.html#top#down#left#right.

$(function(){
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			
			var $target = $(this.hash);
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
			
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body').animate({scrollTop: targetOffset}, 3000);
				return false;        
			}
		}
	});
});

PS: Replace the 3000 (milliseconds) by another value to chance velocity.

Jeff Starr 2009/09/20 9:39 am

@Mark: Thanks for chiming in on this — I am currently dealing with that exact issue on a new site I am working on. The article you posted may be just what the doctor ordered. Looking forward to checking it out. Also, the portion of a URL that proceeds the hash sign is often (although debatable) referred to as a “fragment identifier” — something that I didn’t realize until I began researching the topic.

@Helen: Awesome snippet. I have been using something similar with jQuery but it doesn’t work with the name attribute. Your code looks like it will do the job nicely. Thanks for sharing :)

Garrett W. 2009/09/25 8:42 pm

Looks like in the last snippet, you forgot to change the <form id="comment-12345" to id="comment-form" ;)

Jeff Starr 2009/09/26 12:40 pm

Fixed :)

Helen 2009/09/27 6:36 am

What I forgot to mention: The anchor-topic now has become relevant to SEO now: Anchor-IDs are used by Google to section your site in areas which will be display in the search results.

http://googlewebmastercentral.blogspot.com/2009/09/using-named-anchors-to-identify.html

If you have a Google-Webmaster-account: Log in. There is information about whether your site can be sectioned by Google.

Jeff Starr 2009/10/06 10:16 am

Awesome tips, Helen — thanks again for contributing to the information presented for this topic. Much appreciated! :)

Alex 2009/10/15 11:06 am

Excellent info! Already implemented this on my site to help people jump to the top of pages.

Very useful. Thanks.

Alex

Sunny Singh 2009/12/07 9:15 am

After I realized that this works, I stopped using <a></a>

I also use the name of the section of the site, instead of the domain.
So <body id="www-myunv-com"> would be <body id="main"> or “home” or something.

Tricia 2010/01/05 9:14 am

The CNN link didn’t work for me, either, but upon further investigation, the id that CNN uses for their footer is actually #cnn_ftrcntnt, so going to http://www.cnn.com/#cnn_ftrcntnt works. Perhaps they have changed the id since this was written.

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

Jeff Starr 2009/09/16 9:38 am

@Helen: Thanks for the information and insight. This will give me something to refer to the next time I am dealing with unruly anchor behavior. Note that the name attribute is deprecated in XHTML in favor of id. Using name for scrolltop scripts with HTML is a nice workaround when id is reserved for styling. Thanks :)

@Max Weaver: I don’t think anyone is surprised at the idea of anchors, but replacing them with ids for intra-page navigation may not have been realized by the wider design community. And yes, as Helen points out, anchors work fine in Safari, as do ids used as anchors.

@Chris McCorkle: Absolutely. As mentioned in the article, any element that accepts the id attribute can be referenced and used for intra-page navigation. So comments, quotes, forms, divs, and just about anything else that is needed.
Mark 2009/09/17 10:28 am

Anchors have another use in our web-oh-two/RIA/ajaxy times. The problem is seen when you change the content of a page dynamically, eg. by use of AJax, and then the user wants to either

i) Book mark the page
and/or
ii) Refresh the page.

In both of these scenarios, on reload, the original, unchanged webpage will be seen.
One solution is to use and manipulate anchors, specifically the URL string to ‘remember’ the dynamically generated content.

The key is the little known or used javascript attribute ‘document.location.hash’ which is read/write access to the URL after the ‘#’ (That’s a HASH, not a Pound – I’m English dammit!).

Here’s a good enough example of it’s use – enjoy!

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Mark 2009/09/17 10:39 am

I didn’t know about CSS signatures – Cool idea I just implemented it on scamdex.com:

(Not that I will ever see anyone using it :'( )

Eric Meyer is my Hero!

Jeff Starr 2009/09/20 9:39 am

@Mark: Thanks for chiming in on this — I am currently dealing with that exact issue on a new site I am working on. The article you posted may be just what the doctor ordered. Looking forward to checking it out. Also, the portion of a URL that proceeds the hash sign is often (although debatable) referred to as a “fragment identifier” — something that I didn’t realize until I began researching the topic.

@Helen: Awesome snippet. I have been using something similar with jQuery but it doesn’t work with the name attribute. Your code looks like it will do the job nicely. Thanks for sharing :)
Garrett W. 2009/09/25 8:42 pm

Looks like in the last snippet, you forgot to change the <form id="comment-12345" to id="comment-form" ;)
Jeff Starr 2009/09/26 12:40 pm

Fixed :)
Helen 2009/09/27 6:36 am

What I forgot to mention: The anchor-topic now has become relevant to SEO now: Anchor-IDs are used by Google to section your site in areas which will be display in the search results.

http://googlewebmastercentral.blogspot.com/2009/09/using-named-anchors-to-identify.html

If you have a Google-Webmaster-account: Log in. There is information about whether your site can be sectioned by Google.
Jeff Starr 2009/10/06 10:16 am

Awesome tips, Helen — thanks again for contributing to the information presented for this topic. Much appreciated! :)
Alex 2009/10/15 11:06 am

Excellent info! Already implemented this on my site to help people jump to the top of pages.

Very useful. Thanks.

Alex
Sunny Singh 2009/12/07 9:15 am

After I realized that this works, I stopped using <a></a>

I also use the name of the section of the site, instead of the domain.
So <body id="www-myunv-com"> would be <body id="main"> or “home” or something.
Tricia 2010/01/05 9:14 am

The CNN link didn’t work for me, either, but upon further investigation, the id that CNN uses for their footer is actually #cnn_ftrcntnt, so going to http://www.cnn.com/#cnn_ftrcntnt works. Perhaps they have changed the id since this was written.

« Previous Comments • 1234 • Newer Comments »