In my earlier articles, we discussed progressive enhancement and why it’s generally a better choice than graceful degradation. This is the first of a three-part series that illustrates how to build a simple tabbed box using progressive enhancement techniques.
Web Page Layers
Web pages are built in three layers:
- HTML defines the document content and structure
- CSS defines the layout and styling — it enhances the HTML
HTML is the only layer you can rely on with any certainty. Most browsers will display something — even if you are providing XHTML 1.1 content to a device that only supports HTML 3.2.
The majority of browsers offer CSS but the level of support varies. Users can disable CSS or specify their own stylesheets in preference to yours. Some browsers such as screen readers or Lynx could completely ignore your CSS.
POSH is an acronym for “Plain Old Semantic HTML”. The term was coined by the microformats community, but it’s a useful concept for all developers who strive to build well-structured, accessible, semantic and valid HTML:
- use semantic elements and attributes, e.g.
h1for your main title,
tablefor tables of data (not presentation), etc.
- use semantic id and class names when necessary
- use the simplest and least amount of HTML possible
- validate your code.
In the following example, we will build a tab box. The code is a simple client-side only widget, but the same concepts can be adapted throughout your development. Almost any control you can imagine will have a POSH equivalent.
Building the Tab Box HTML
At it’s most basic level, a tabbed box is a list of in-page links to associated content. The HTML structure could therefore be defined as follows:
This page should work in almost any web browser with support for HTML 4.01 or XHTML 1.0. Older browsers will continue to display the content even if the links do not work as expected.
In my next post, we add a the CSS layer to make it prettier and improve the usability without adversely affecting the functionality.
Other parts in this series:
- Progressive Enhancement Techniques 1: the HTML
- Progressive Enhancement Techniques 2: the CSS