POSH - Plain Old Semantic HTML

For years I've been advocating the use of valid, semantic, accessible, well-structured HTML. It's a bit of a mouthful to say, but thanks to an acronym being coined on the Microformats IRC channel almost seven months ago, I can now shorten that to POSH instead.

POSH, in case you haven't heard of it already, is short for "Plain Old Semantic HTML", and is obviously much quicker and easier to say than "valid, semantic, accessible, well-structured HTML". Unfortunately POSH - semantic markup - is also something most people building websites or creating content for the Web have yet to discover. <sarcasm>Perhaps a fancy acronym will help speed up adoption.</sarcasm>

To start writing semantic markup, you need to:

  • Validate your HTML
  • Stop using tables for layout
  • Use semantic elements and attributes for their intended purpose
  • Use semantic class names and id values
  • Use as little HTML as will get the job done

It would sure be nice to see widespread use of semantic HTML sooner rather than later. So get out there and make sure all the websites you design or program use semantic HTML. Teach all your colleagues and clients about semantic HTML. Use it, talk about it, blog about it. If you don't already, start Explaining Semantic Mark-Up.

The more people use the semantics of HTML correctly, the more reason for various user agents to improve their support for it.

A few practical semantic HTML tips:

  • Use heading elements (h1 - h6) for headings, and make sure they create a logical outline of the document.
  • Use tables to mark up tabular data, and use the full set of features (caption, th, scope, headers etc.) provided by HTML 4.01 to make sure that the tables are accessible. Learn more about that in Bring on the tables.
  • When marking up a quote, use q or blockquote. There are some tips on using them in Quotations and citations: quoting text. And don't forget to Use only block-level elements in blockquotes.
  • For images, make proper use of The alt and title attributes.
  • Use HTML list elements (ul, ol, dl) to mark up lists. More info in Tommy Olsson's Lists and Mike Cherim's Using HTML Lists Properly.
  • Use the em and strong elements for emphasis, not to make text bold or italic (i.e. do not mindlessly replace i and b with em and strong).

Got any other tips?

Update: After re-reading the article, I realise that my attempt at being humorous failed. I also realise that parts of this article were phrased so badly that my message got lost.

I don't really mean that everybody should start talking about POSH all the time. What I was trying to say (but did in a bad way) is that more people should think about semantics when they write HTML. I have updated the most unfortunate parts of this article to make that (hopefully) more clear.

Acronyms are often confusing, so if you don't want to talk about POSH, then don't. Just use and advocate semantics and structure instead. That's what I wanted to say.

Posted on November 1, 2007 in (X)HTML