Plain Old Semantic HTML (POSH)

See Plain Old Semantic HTML (POSH) at its new home on bradley-holt.com.

I didn't realize someone had coined a clever phrase for this concept. The basic concept of POSH is creating (X)HTML that is semantic, or structural, rather than presentational. Most people experience the web as a visual medium and thus assume that it is a visual medium. Many web development tools (such as Dreamweaver's WYSIWYG editor) reinforce this misconception. The web is in fact a structured medium and one facade to that structure is its visual side that most of us experience every day. People without the gift of sight, search engine robots, and other web crawlers don't experience the web visually. In order to make the web available to the widest audience possible we need to build websites with proper structure first. Then we can add presentation via CSS and behavior through a JavaScript library such as jQuery.

Here are the basic steps to make your next website POSH:

• validate your (X)HTML - invalid markup is not very POSH at all;
• use tables only for tabular data, never for layout;
• use existing elements and attributes if they fit the semantics of what you're creating (e.g. ul, li, dl, dt, dd) instead of generic div or span elements;
• use class and id names that are semantic, not presentational (e.g. MainNav is semantic but LeftNav implies presentation and is not so POSH);
• use as little (X)HTML as possible to markup your content.

For those who claim that this is too limiting when it comes to design I suggest you check out css Zen Garden. Very POSH, very cool. Every single design you can pick from uses the same structured XHTML page - the only thing that changes is the CSS style sheet.

Earlier I mentioned something about adding behavior with JavaScript. My favorite JavaScript library is jQuery. jQuery lets you unobtrusively add JavaScript behavior to your (X)HTML pages using simple CSS selectors. This means no inline JavaScript code in your (X)HTML - no onclick or onmouseover event handlers cluttering things up.

POSH + CSS + jQuery (or another unobtrusive JavaScript library) is very cool indeed. But it's more than just cool. It makes your websites easier to maintain and it opens the door to concepts such as microformats - data that is both human and machine-readable. Are you ready to get POSH?