Plain Old Semantic HTML (POSH)
POSH yet another acronym to add to the list and yet a very useful term to encapsulate the need to create well structured HTML.
Let's face it there's still some horrible code being written out on the web and still a surprising percentage of sites being built with tables used for presentation. Given the take up of the Web 2.0 acronym perhaps another acronym to remind us of the fundamentals isn't such a bad idea.
So what is POSH? Microformats.org lists a checklist of what defines POSH as:
1. The first rule of POSH is that you must validate.
Even if you think your HTML is valid check it against the W3C validator service. While you're busying validating your HTML you should also check your CSS and test your site against section 508 and WAI compliance. If you’re using Firefox there is a great plugin called the Web Developer Toolbar that adds these tests to your toolbar.
2. Second, drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general.
Simply put presentation and content should be separate. By separating the two you make it much easier to develop sites and when the day comes to redesign the site you’ll be thanking your lucky stars that you did this.
3. Next, fix your Bed and Breakfast.
B and BR tags still manage to work their way into web pages and yet these presentation tags should really be replaced by calls in the CSS as in step 2. There are a few proper uses for BR tags but if you need something emphasised use STRONG or EM tags.
4. Eliminate Anorexic Anchors.
If your anchor is linking to any empty href then it's not linking to the structure of the page but an empty space. Build your links into the existing structure of the page and give the link a rel path to show the meaning of the link.
5. Use good semantic-class-names.
A semantic class name will explain what the element is rather than what the element looks like. So don't go calling your class names different colours just because that’s what the class changes, give the class a name based on why it changes the colour.
From this simple checklist you should see that POSH builds on three basic principles. First to write valid html, second to separate presentation from content and thirdly to embed useful information into the HTML. Microformats is an extension of the third principle aimed at developing the embedded information in HTML but if we start writing plain old semantic HTML now we save ourselves future headaches while still creating great web sites.
Want to find out more? Then check out the Boagworld POSH forums.