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
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code
Jump Start Git, 2nd Edition