greg-wood.co.uk
The homepage of web designer Gregory James Wood
The Blog
Being overly anal with HTML enduces rage
In the strange lands of HTML, semantics purism has been a fairly hot topic of late. With the help of some slightly more advanced CSS2 selectors, web developers have been able to start cutting out those unnecessary divisions and nasty classes, but are they just making more work for themselves?
Personally, I’ve stayed pretty indifferent to the whole semantics issue, although for the most part I’ve leant towards Andy Clarke’s thoughts on extraneous HTML elements that we all use in order to make styling our HTML pages easier. They’re not semantic, and they are (mostly) unnecessary.
However, there are times when the purist point of view does my head in. At the weekend I was blazing some HTML & CSS from some Photoshop designs, and I came across the pictured example. I was in a responsible mood, so I coded the HTML as so:
<div id="issue_more">
<h3>A Super Title</h3>
<h4>Sub Title #1</h4>
<p>Content bla bla, content bla bla, content bla bla</p>
<h4>Sub Title #2</h4>
<p>Content bla bla, content bla bla, content bla bla</p>
</div>
No surprises here. The container with an id of issue_more is a division of the page, so it’s marked up as so, and it’s content is all semantically joyous. Styling this nice semantically-pure HTML however, is a right pest. Because the content will be dynamic, I couldn’t really using positioning to layout these elements, so I had to use floats:
div#issue_more { width:23.5em; padding:0.5em; float:right; background:#fff7cc; overflow:hidden; line-height:1.0em; }
div#issue_more p { margin-bottom:0; }
div#issue_more h3 + h4 { width:11em; float:left; }
div#issue_more h3 + h4 + p { width:11em; float:left; clear:left; }
div#issue_more h3 + h4 + p + h4 { width:11em; float:right; position:relative; top:-2.0em; margin-bottom:-2.0em; }
div#issue_more h3 + h4 + p + h4 + p { width:11em; float:right; clear:right; }Now I know there’s a lot of ways to solve a problem in CSS, but this was the solution that fit best at the time. This also uses a significant number of inherited styles and would have to be debugged for IE6. What a mission! If I had just used a few extra divisions and two simple lines of CSS I would have saved myself a significant amount of time and effort.
I’m not really sure what the point or the argument of this little whine is, but I do know that developers and designers shouldn’t feel pressured by peers in the industry to write millions of lines of CSS in order to be able to omit a few lines of HTML. This applies especially so for small bits of code like the above example. Most of us in the industry design and develop websites because we enjoy doing so, and therefore we shouldn’t subject ourselves to the computer rage that often occurs when trying to be anally responsible on a deadline.
I’m not saying we should all be wrapping everything in extra divisions for the sake of it, just don’t feel guilty when you feel the need to code 25% unsemantic HTML.
Post a comment
About this entry
Feed Me!
RSS feeds, for all your content-to-desktop needs!
Feed me what? I hear you ask. Well, RSS feeds are a fantastic way of getting content from your favourite websites delivered to your desktop. No need to trawl through your favourites checking for updates! Especially useful for arse-ugly websites.
Copyright © Greg Wood mail@greg-wood.co.uk http://www.greg-wood.co.uk 2007 | Everything here protected and licensed using a Creative commons license | Get some RSS
Comments (4)
Post a comment
Glen // 02/04/08
I agree…
Reuben Whitehouse // 02/04/08
It’s true. It feels like a bit of an achievement to ditch the classes, etc. but ultimately it takes just as long and it’s not practical anyway if you’re building it for IE6. Dynamic content also puts demands on the amount/style of your HTML.
Sam Hardacre // 04/04/08
I’ve found myself having similar thoughts when it comes to these issues.
Yesterday I was playing about with some text layout, just to pass some time (sad bastard I hear you say) and came to the same problems. I spent a good hour or so trying to achieve a seemingly simple layout issue.
In the end I decided to save the hassle of paying for hair replacement treatments and chuck an extraneous span in the help it along. It still needs a bit of work and a good clean up but you can see the result so far here
Susan Shepherd // 09/04/08
Well Greg, it was kinda like Mr. Bean to go the long way to omit a small part of that picture sample (remember his famous staining of a painting in a museum, that wasfunny!). Tinkering with a simple lay out here and there is permissible if only it wasn’t done for a teeny-tiny html-you’re right you shouldn’t have gone through all the trouble.