Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Cleaning up code with semantic anchors
The a element is all too common when building websites. We use it to create hyperlinks to other parts of our site and to external sites. We can also use it to link to specific sections on the current page, so a visitor can click on a link and jump to a footnote or to a specific answer on a Frequently Asked Questions page. This type of link points to anchors on the page—anchors made originally as follows:
With such an anchor on the page, you could create a link that would take you directly to the anchor:
Jump to contentHaving an empty a element on the page is not a desirable solution though, nor is it semantic, and there isn't always a good opportunity to use a non-empty element instead. Fortunately, there's a much better alternative: The id attribute, whose value must be unique in the entire document.
Using an id instead
The id attribute allows you to uniquely identify any element of choice. Rather than using an a element, we can simply apply the id attribute to the containing element, such as a paragraph or div:
... Doing so gives you a few new possibilities:
- You can style the element with CSS by using the ID-selector (
#content { � }) - You can use DOM scripting to get that element in the DOM (
document.getElementById('content')) - You can use the element as an anchor and then link to it (
...)
That's right, an id attribute functions just like this code: The difference here is that it is more semantic, as the attribute identifies the element and all of its contents, whereas the -solution doesn't. It also cleans up your code by removing a superfluous, empty element.
Note that Netscape 4 does not properly support this, neither do some mobile browsers. In the case of the latter, at least, we can expect them to add support for this in the foreseeable future, whereas those who still have to support Netscape 4 will be less fortunate.
11 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Kate Bolin
: http://www.katemonkey.co.uk/
12 July 2006, 23:38 : Permanent link to comment
Dude, this appeared just at the right time for me. Thanks!
goetsu
: http://ww.fairytells.net
12 July 2006, 23:52 : Permanent link to comment
sorry for the news but it break the keyboard navigation with Internet Explorer if your element with the ID doesn’t have a haslayout property
Steve
: http://
13 July 2006, 03:42 : Permanent link to comment
Very interesting…
Are there any specs on this? in terms of future support?
Tim
: http://maxvoltar.be
13 July 2006, 06:33 : Permanent link to comment
Handy�!
Kelson
: http://www.altbrowser.net/
13 July 2006, 07:50 : Permanent link to comment
The last time I redesigned my main website, I was definitely in the “still needs to support Netscape 4” crowd. I remember having to do annoying things to my CSS layout like wrapping the contents of a DIV in a single-celled table so that I could get NS4 to show the background.
It’s dropped off considerably since then. It still accounts for more hits than some of the less well-known Gecko and KHTML variants (Shiira, OmniWeb, K-Meleon, Galeon and Epiphany), but if stats are to be believed, there are more people using IE 5.2 on MacOS than Netscape 4.
karsh
: http://www.blackgayblogger.com
13 July 2006, 08:54 : Permanent link to comment
Wow—that’s a great thing to know! I design a lot of e-mail newsletters and am always trying to find a way around using the empty anchor tag. Very cool – thanks!
Faruk Ate?
: http://kurafire.net/
13 July 2006, 09:00 : Permanent link to comment
Steve, the HTML 4 specification has had this as part of the spec since the beginning:
The id attribute has several roles in HTML:
As a target anchor for hypertext links
( Source )
Steve
: http://
13 July 2006, 11:50 : Permanent link to comment
@Faruk
Awesome! you just made my day!
Now, how can I start (ab)using this ;-)
Bob Jonkman
: http://
13 July 2006, 13:39 : Permanent link to comment
I like to have a “Top of page” link beside every tag, so I define an ID for the body:
and then:
[Top]Header Text
</h1>
This looks like:
[Top] Header Text
Works great in Firefox, doesn’t work at all in IE6.
—Bob.
Bob Jonkman
:
13 July 2006, 13:42 : Permanent link to comment
Stymied by HTML stripping. How does one display angle brackets in these comments?
Colm
: http://www.iqcontent.com
14 July 2006, 02:10 : Permanent link to comment
To get this to work correctly for keyboard users in IE, the div/id needs to have a width otherwise when the user tabs again otherwise the focus will go back to the top of the page.