Chances are if you’re reading this blog then you already know about good coding practices, and that in essence, semantic coding is focused around the separation of design and content. You’ll know that HTML is your means of serving up content and that your pretty gradients and curved edges should be applied with CSS. So as soon as you started using CSS properly you instantly started advocating semantics and using it as a marketing tool on your website.

But are you actually coding semantically…?

Test No.1: Italics and bold

Ok so if I want to draw attention to something on a page, I can make it bold or italic, but how should I go about doing it? The obvious and simply answer would be to use b and i tags, but hang on… isn’t that presentation? So what is it doing in your HTML?!

If you want something to be bold, as it is an important point which you want to stress, then use the strong tag, if you want something to be read with emphasis then use the em tag. However if you want something to appear bold or italicised purely for decorative purposes (like the headers in my blog) then do it in the CSS.

Test No. 2: Div Names

You’ve just started slicing up the site design and deciding how to go about the layout, you add in the content placing the secondary navigation for your sidebar in a separate div which you’ll float to the right, so that you don’t forget what it is you’ll call it ‘right-container’. Surely you haven’t broken semantics already? You’ve only just started coding!

Naming an element by its position or colour is generally a bad idea, as well as not being semantic. Your HTML document should make perfect sense without any styling, and a list of secondary navigation before the content called ‘right-container’ doesn’t make a great deal of sense. Instead use id and class names which actually describe the content such as ‘sub-content’, ‘secondary-nav’ or ‘advertising’. You’ll thank me when you do a redesign and ‘right-container’ is now the footer and ‘red-links’ are now green.

The Bottom Line

These are just two examples of ways in which you might actually be breaking semantics, there are plenty more ways but you don’t need someone to list them all for you. What you need to do instead is to truly believe in semantics and actually think semantically when you code your next website. Remember, HTML is for content and only content, it’s much cooler when you do it right anyway.