Best Practice: Always ID your Heading Tags

Here’s a simple best practice. Always ID your heading tags! For example, if you’ve got an <h2> element, be sure to make it <h2 id=”some-heading”>.

IDing heading tags is especially important on long documents.

Why? Because if you don’t, someone else can’t reference the part of the document that they want to reference in a blog post or somewhere else. And if they can’t, they just might reference someone else’s web page instead. Or if they do reference it, readers who click over to your URL might give up on reading before finding the appropriate document, and never come back to your site when they might otherwise have become an avide reader. How often have you see a link to a web page where the person linking included the text “Scroll down to the section entitled…“  Bleach!

Given the heading tag mentioned in the first paragraph above, and assuming it was contained in a document entitled “whitepaper” in the root of www.foo.com, you can point straight to that heading using a URL fragment like so:

http://www.foo.com/whitepaper#some-heading

Ben Coffey talks about this same problem over at URLs for Specific Portions of Documents.  He also talks about CiteBite which helps bloggers and others link directly into a part of a document as if there had been an ID there. But publishers, if others start using CiteBite on your content simply because you don’t include the ID attributes they need to link to your directly, guess who will get the Google PageRank?  Not you… ;-)

One more thing. If you are creating content that will be displayed above or below other content, i.e. blog posts that get listed with other blog posts on the same HTML page, you’ll need to make sure your IDs are unique. I personally have started using a convention that appends the date in “YYYYMMDD” format to the end of a meaningful fragment, seperated by a dash, as in:

http://www.foo.com/whitepaper#some-heading-20070118

This tends to work for me because I almost never post more than once per day. Also, though I personally dislike the inclusion of dates in URLs because of how difficult it makes things for users to remember or discover the URLs, having the date as a fragment suffix is not quite at bad. People using the browser URL auto-complete can still easily find the URL they visited recently enough that its URL is still in the browser’s cache. YMMV.

Lastly, if you are going to ID your heading tags, you probably should also create a table of contents. ‘-)

This entry was posted in Best Practices, Call to Action, Publishers, Teachers, Web Designers, Web Developers, Website Owners. Bookmark the permalink.

5 Responses to Best Practice: Always ID your Heading Tags

  1. When building federali.st, one of my main goals was to have some sane way of linking to each paragraph of each essay. I also wanted to link citations of the constitution in each paper to the relevant part of the constitution, so e.g. linking to Article 1, Section 8, Clause 3 is as simple as going to http://federali.st/constitution#a1s8c3.

  2. Edward:  Way cool, thanks for commenting.  Nice site, BTW. I like yours much more than the first Google result, nicer design (less gaudy) and nicer URLs. :) I really like how you display a “#” when the mouse cursor hovers over a heading those allowing someone to click it to get that specific shortcut into their browser’s URL field.

    Looking at your site, I wonder if you wouldn’t mind my comments? I wonder if you would want to use alternate URLs? 
    For example, instead of [1] what about [2]?  You could 301 redirect the former to the latter in case people wanted to access it directly by number. And though long, the latter would index better on Google and would be more easily understood by people who don’t remember by number. Further, if you wanted a shorter version, you could create a third version by coming up with a resonable short version of the title such as [3] (the nice thing is you don’t have to worry about new Federalists papers coming along to screw up your conventions!:) 

    What’s more, I’d love to see you include these URLs at the top of your page with text like: “Each of these URLs will bring you to this page” I plan to advocate this in general for websites in the coming months.

    Also, I notice you use the following fragment (using URI Template syntax): #a{article}s{section}c{clause}. Looking at that I don’t think many people would intuit that and hence might see it as just a generated fragment but one without meaning. I wonder if maybe you’d want to consider one of the following (of course changing means you’ll have to maintain both if you already have significant inward links):

    #a{article}-s{section}-c{clause}
    #art{article}sec{section}cla{clause}
    #art{article}-sec{section}-cla{clause}
    #article{article}section{section}clause{clause}
    #article{article}-section{section}-clause{clause}

    I know the latter is long, but it is very obvious what it means. The abbreviations “art” and “sec” are pretty clear, but maybe not “cla” unless you already know the terminology. If nothing else, seperate the letters with dashs

    Now, that said, I’d also consider creating full URLs linking  directly to each article and section and clause), i.e. [4] or [5] (the slashes make using single letters in [5] a little more obvious than in the case of the fragment)

    You could have a link to one of these URLs next to the heading that could open to a document showing just the text for this article/section/clause. To be clear, I don’t mean people would have to drill down to different URLs to read the constitution but instead if someone wanted to link directly to  article 1 section 8 clause 3 they could do so directly, AND be able to print just that clause.  Plus if linked correctly this could give you (slightly) more PageRank as each article/section/clause would link back to the higher level document.

    I would (necessarily) advocate this level of effect for all documents, but your site has a series or rather significant documents so the effort put in will serve benefit long lasting; much more so than the average blog post. ;-)

    [1] http://federali.st/2
    [2] http://federali.st/concerning-dangers-from-foreign-force-and-influence/ 
    [3] http://federali.st/foreign-dangers/
    [4] http://federali.st/constitution/article-1/section-8/clause-3/
    [5] http://federali.st/constitution/a1/s8/c3/

  3. brett melton says:

    I usually give all of my tags either an id or class to style with CSS. I’m not sure if I should be doing every single one though. Whats the best practice in doing this?

    Brett

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>