Skip to page content

Bite Size Standards

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

Supercharge your image borders
CSS values for colors
CSS selectors: the basics
Coloring text-decoration
Centering an image, Part 2
Centering an image, Part 1
Easy cross-browser transparency
Become a Bite Size Standards author
Bite Size Standards relaunches
Equal height excerpts with ems

Cleaning up code with semantic anchors

Faruk Ates | 12 July 2006

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 content

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

About the Author

Faruk Ates is a Web Kaizen Specialist who blogs on web standards, accessibility and more at

He spends most of his time trying to come up with new, innovative uses of existing technologies in addition to constantly refining best practices in code, markup, semantics and design.

Articles by Faruk Ates


| Post a comment | Comments Feed

  1. Kate BolinKate Bolin�s site :

    12 July 2006, 23:38 : Permanent link to comment

    Dude, this appeared just at the right time for me. Thanks!

  2. goetsugoetsu�s site :

    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

  3. SteveSteve�s site : http://

    13 July 2006, 03:42 : Permanent link to comment

    Very interesting…
    Are there any specs on this? in terms of future support?

  4. TimTim�s site :

    13 July 2006, 06:33 : Permanent link to comment


  5. KelsonKelson�s site :

    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.

  6. karshkarsh�s site :

    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!

  7. Faruk Ate?Faruk Ate?�s site :

    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 )

  8. SteveSteve�s site : http://

    13 July 2006, 11:50 : Permanent link to comment


    Awesome! you just made my day!

    Now, how can I start (ab)using this ;-)

  9. Bob JonkmanBob Jonkman�s site : 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:


    Header Text

    This looks like:

    [Top] Header Text

    Works great in Firefox, doesn’t work at all in IE6.

  10. Bob JonkmanBob Jonkman�s site :

    13 July 2006, 13:42 : Permanent link to comment

    Stymied by HTML stripping. How does one display angle brackets in these comments?

  11. ColmColm�s site :

    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.

Commenting is closed for this article.

© Copyright 2006 Bite Size Standards and Authors