Episode Three: Mark it up!

This is the third part of the series, “Environmental friendly CSS

In the previous episodes we’ve created a creative/technical brief and then mocked-up design in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question:

How to markup category cloud?

There are two simple approaches that usually comes to mind at first: a paragraph and an unordered list.

If we use paragraph with links, we wouldn’t probably miss it in terms of the default presentation across the range of User Agents. The thing is — if one is marking-up a ‘cloud’, it’s natural that all the links are inline, one after another.

— Let me think about it! Yea, I will just set text-alignment: center to that paragraph and I’m done. Great!

<div id="category-cloud">
	<h4>Most popular joke types and categories</h4>
		<a href="#">Political jokes</a>
		<a href="#">Professional humor</a>
		<a href="#">Mathematical jokes</a>
		<a href="#">Ethnic jokes</a>
		<a href="#">British tell jokes</a>
		<a href="#">Self-deprecating humor</a>
		<a href="#">Blonde jokes</a>
		<a href="#">Redneck jokes</a>

Not great! The above code is wrong. The ‘cloud’ is a visual cue, not the structural element. The category cloud is — in its essence — a list of categories, so the more suitable XHTML element would be unordered list.

It’s not a cloud, it’s a list

Cloud as typography or XHTML element doesn’t exist. Tag or category cloud is a visual representation of the list of categories. So let’s try semantically correct markup — an unordered list.

<div id="categories">
	<h4>Most popular joke types and categories</h4>
		<li><a href="#">Political jokes</a></li>
		<li><a href="#">Professional humor</a></li>
		<li><a href="#">Mathematical jokes</a></li>
		<li><a href="#">Ethnic jokes</a></li>
		<li><a href="#">British tell jokes</a></li>
		<li><a href="#">Self-deprecating humor</a></li>
		<li><a href="#">Blonde jokes</a></li>
		<li><a href="#">Redneck jokes</a></li>

Some novice CSS developers in the past argued that they were having troubles with list-items in tag clouds. In the last article (coming up next week) we will explain it throughout. But, it’s very important to learn how to shift from visual/CSS mindset to semantic/contextual XHTML mindset.

A little practice will get you there

When deciding on the XHTML structure for any given element, try to ignore the design at first. You will easily modify markup later if you find no other way to accomplish layout only with CSS.

Instead, dive-in under the surface and check the bare-naked content and context to decide what markup should do the job.

If creating XHTML snippets is a second nature to you, please share how do you fight your thoughts about how it’s going to look when choosing appropriate markup?

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?