Is my HTML clean enough?

All this talk about POSH (plain old semantic HTML) has got me think­ing about how I build web sites. I seem to have been fol­low­ing the prin­ciples of POSH for a few years now:

• Valid HTML;
• Clean and well struc­tured HTML;
• Only use tables for tab­u­lar data;
• Avoid present­a­tional HTML where ever possible;
• Use semantic ID and class names.

As well as try­ing to only use:

• HTML for struc­tured content
• CSS for presentation
• Javas­cript for behaviour

How­ever, things do not always work out that simply. For example a site I built a few years ago has an excess­ive num­ber of divs aka divitis. I did that on pur­pose, purely so I (and more import­antly any­body who had to fol­low) would not have to deal with the dif­fer­ent box mod­els of IE 5/5.5 and every­body else. Even with this blog, the con­tent is struc­tured for ease of present­a­tion and there are extraneous divs purely for present­a­tional purposes.

The next incarn­a­tion of this blog will be bet­ter in how the con­tent is struc­tured, how­ever, I will not guar­an­tee that about extraneous divs for purely present­a­tional pur­poses. The prob­lem as I pre­vi­ously stated is that the design I want using my pref­ered faux columns method who require six sep­ar­ate back­ground images for an elastic design. While I can do this with a single div and CSS3, the only browser that cur­rently sup­port is Safari.

The altern­at­ive are:

• Use a table for this lay­out, I dis­agree with this method on prin­ciple as well as not want­ing to spend the time neces­sary to relearn the skills required (ser­i­ously I have for­got­ten how to use tables for layout.)
• Use the One True Lay­out which has it#’s problems.
• Use javas­cript to get equal height columns. The main issue with this is that javas­cript is sup­posed to be for beha­viour not for presentation.

If I was doing a site for work, I would have no qualms about using the faux column method and extra div ele­ments for present­a­tion. Because, it is the most effi­cient method for me to use at the cur­rent time. How­ever, as this blog is about per­sonal expres­sion and that includes the under­ly­ing code, I will look at the altern­at­ives more closely.

POSH Plain Old Semantic HTML web+standards faux columns

This entry was posted on Sunday, April 29th, 2007 at 9:54 pm and is filed under css and html, elastic design . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.