The graphical conceit of tabs is a prevalent one on the web, and that fact is not without justification. Hyperlinks are like little doors suggesting treasure troves behind, tabs marked “top secret” in an FBI agent’s filofax. One can find unordered lists of main navigation links marauding as file folder tabs all over the Internet.

Which is all well and good, but what happens when tabs are not merely hyperlinks to other pages, but are rather intended to show and hide information without a page refresh?  The problem of how to semantically mark up such inline tabs has troubled me for years. Yes, years.

I started out making them their own unordered list of links, connected only by JavaScript to their corresponding content further down the page.  But this created a semantically empty set of links that were useless to users browsing without JavaScript.  To solve that conundrum, I even went so far as to generate the HTML for the tab links on the fly using JavaScript.

My next generation thinking on this problem led me to all kinds of fanciness involving definition lists (one of my favorite browser elements) and absolute positioning.  The idea was to have each tab be the DT of a corresponding DD — a semantically sound idea, but a very difficult structure to transform into graphical tabs with only CSS and a little JavaScript.

At long last, about a year ago, it occurred to me — something so fundamental to the Internet, I couldn’t believe I had overlooked it for so long.  Of course there was a deeply semantic way for me to link a list of hyperlinks at the top of a page to corresponding set of content further down: named anchors.  Duh!

All I had to do was write a quick JavaScript to hide my inactive tabs on page load and then convert links to “#divName” into a show/hide function.  So easy!  So obvious!  Now my inline tabs not only degrade nicely for users browsing without JavaScript but are also extremely friendly to search engines.