First steps towards Clean Semantics

.. just a few careful ones

Some of you may have read my post on finding Zen in the Garden or the prequel to that one stating less is more. These posts may have tickled your brain and may have made you wanting to know more. Then again you may have not.

"Front-End Architect"

Some time ago I have read an article on the 72 dpi In the Shade site. The article was fun to read as it provided 10 CSS tips from a Professional Front-End Architect. A job title that I hadn't encountered before. The writer had originally used the job title "Professional CSS Architect". A title that strikes me as even more odd. I am considering using one of these titles in the future. Once I can give some meaning to them, that is.

Anyhow, that was not the point of me referring to the article. Nor the tips and the hilarious long list pointing the author to mistakes he makes himself despite his well intended tips. It's fun to read and a good laugh, do take the time. But I get away from the subject.

The thing that triggered me in the article was the point about keeping containers to a minimum. While looking at some of the code I made for the website recently I once again was shivering with some of the markup I produced. Wrapping stuff inside empty and un-classed div elements! Huwuwrruurrg! Just too horrible for words.

It's a disease

Even though admittedly I was handed the first rough version of the markup and probably was a bit too shy to really rip it apart or even better, just throw it away and start from scratch, I am the one responsible for the markup. At least for a few more days.

I got a spot of the disease that many "Front-End Developers" suffer from in the beginning of their career: div-itis. Just throw in another wrapping <div> to move elements into place. Yes, I am guilty. I may have never served table-soup, but div-soup was on the menu.

But I must also say that while progressing with the markup to cover more and more of page templates I made it leaner and leaner. Nowadays I think long on which element is the best for the job and try to use just that single element and only put a wrapping <div> unless I cannot think of a way to style without it.

Yes, I have bettered my life and will continue to do so.

Roho

Yes, I am guilty. I may have never served table-soup, but div-soup was on the menu.

Make it clean and lean

The article mentioned above made me think on minimizing containers. It made think on styling without using any artificially added container.

The challenge is produce only true semantic markup. Since, where's the semantic in a <div>?

First challenge: keeping it simple

Let's consider this very simple layout. A centered, fixed width design with a header, the menu on the left side and a one column content area. For now just forget the footer.

Doing it quick and dirty we need the following:

• A wrapping <div> to center everything in the browser.
• A <div> for the header
• A <div> for the content and the menu
• The menu can be just a simple <ul>, we don't need the extra <div>. (Already doing some clean thinking here, better put another <div> around it.)
• Finally, let's wrap the content in a <div>

So, there we go, a simple design and already we have four or even five <div>'s in there. We can put meaningful ID's or classes on these and feel already semantic. But no that's not really true. The <div>'s remain semantically void.

Challenge for you

I have wrestled a bit with this simple layout and have come up with a solution that uses no <div>'s what so ever. Only true clean semantic markup is used. Better still I only used one ID for the menu to be able to use <ul> within the content.

I have even extended the layout above to be more realistic without breaking the clean semantic markup.

The challenge for you my dear reader is that you can have a go a creating this layout without using any <div>'s.

Cliffhanger

No, I will not show you until a next time.

I am busy completing the example files and placing them on my web server. Until that is done I ask you to, virtually, hold your breath.

This article is part of a series of four

1. First steps towards Clean Semantics
2. The shape of Clean Semantics
3. Clean Semantics: the three column attempt
4. Clean Semantics in practice (Will follow shortly).