XHTML : The Semantics Strikes Back

Hello everyone! I’m Hawk, some of you may have seen me commenting on Danny’s posts before. What? What happened to Danny? Well… urm… he’s tied and gagged in the basement at the moment and I’m taking over his blog >:D. I will also be auctioning him off to the highest bidder. Anyone want a new web designer slave? :D

On a more serious note, we have a problem when people start advocating xHTML/CSS implementations but fail to understand the idea behind it. Read on to find out what people are doing wrong.

xHTML/CSS is not just some silly marketing buzzword or acronym… its an idea. An idea of seperating content(semantics) from presentation(styles). This means without styles your content structure should make sense and you will be able to present the content in many ways without needing to change the content structure. Sounds simple enough right? Unfortunately not everyone fully understands this.

Lets take a look at 2 examples for scalable rounded corners.

  1. http://tutorials.alsacreations.com/cadre/
  2. http://www.vertexwerks.com/tests/sidebox/

Without reading further, take a guess which got it right and which got it wrong. Don’t cheat!

The first tutorial got it wrong and the second one got it right. Now if you know why the first one got it wrong, you need not read further. If you do not know why the first one got it wrong then continue reading to find out.

A picture is worth a thousand words… so lets use a picture to illustrate.

Bad rounded corners

From the picture you can see that the tutorial included the presentation elements in the content structure. The rounded corners should not appear if the document is unstyled. This example clearly fails at seperating the presentation from content.

Now lets look at a good example.

Good Rounded Corners

See, this is the way it should be done. Without styles, none of the styling elements appear thus truely achieving seperation of presentation from content. The mark up is better too, since the panel’s title is given a header tag which adds some meaning to the content. That would be something we shall discuss in another article :)

In conclusion, if you are advocating xHTML/CSS implementations but fail to understand the idea behind it… you might as well be designing in tables. Do not simply jump on the bandwagon, understand why there is a push for xHTML/CSS designs and follow it.

You may take a look at our website which i consider to be well structured and seperates presentation from content.

Leave a comment