Skip to main content


Showing posts from November, 2016

Semantic Tab Panels via HTML Tables

There are plenty of tutorials online for creating tabbed panels in HTML documents, some using JavaScript, some using pure CSS tricks. Most of the approaches seem to assume that a list of some type is the appropriate element to use for a tabbed interface, but I'd argue that lists are not semantically descriptive of tabbed interfaces. They either include the main tab content along with the tab name, like so: <ul class="tabs"> <li class="tab-active"><a href="">Active</a> Active tab content goes here</li> <li><a href="">Second</a> Inactive second tab content goes here</li> <li><a href="">Third</a></li> </ul> Or the tab content has no semantic relationship with the tabs that control their display, like: <ul class="tabs"> <li class="tab-active"><a href="#first">Active</a></li>