Semantic Code is important for a number of reasons, but firstly let's define what we mean by semantic code.

Semantic Code - A term that refers to the practice of separating design and structure, or separating visual appearance vs content.

Sometimes it is hard to pin down what is semantic code and what is not semantic code. Sometimes it is not so hard. Let's look at an example.



Is this code valid? Yes, it is perfectly valid (if you are declaring an HTML doctype and not an XHTML doctype at least). Even with an XHTML doctype it will likely render fine in nearly all browsers. So why should we not use it?

Well, there are several reasons, related to SEO, human visitors, and yourself.

With respect to SEO, it is important to ensure that search engine spiders are seeing the content and understanding it as you wish for it to be portrayed. The above example prints out a rather large, bold, italic line of text. This is likely important text (else why would you make it so large?). The spider, however, can not really rank it's importance very effectively - you've just wrapped styling elements around the text - who knows how it important it should be.

Can we rewrite the code so that search engine spiders understand how important it is, while still acheiving the same visual result? Of course! Otherwise, I'd have stopped typing already.



Viola! Now isn't that much neater and easier to read? Of course it is, and a spider will realize that since it's in an h1 header tag that it is important to your page's theme.

But wait - that text won't be blue, bold, italic, and it may not even be the same size or font! Well, that's easy to fix, and this is how it should be done. Make a cascading style sheet, either inline in your HTML document, or linked to from your document (instructions on how to do so are outside the scope of this article) with the following definition:



Now, we have nice clean HTML code that spiders (and us!) can read easily, while still presenting it to the user in the same visual fashion. Spiders will understand the importance of the text because we used the proper HTML tag to describe the text, and humans can still benefit from all your styling whims.

Beyond spiders, however, semantic code is still very much beneficial. Here are some reasons -

• When you separate content and presentation, it is easier for multiple users (whom often are only really experts in one of the areas, and not the other) to collaborate on a project together. Your reporters or article writers can concentrate on the content, while your designers can make sure it shows up good.
• If you change your mind on how you want your pages to show up you can edit your one CSS file and affect your entire site in one sweep, making updates and tweaks immensely easier.
• Changing your visual appearance does not actually change the content of your pages - the spiders don't need to recrawl an indexed page since it hasn't changed.
• You will be less prone to inadvertently making simple mistakes when using less code - for instance, in the "bad" example above it would be relatively easy to forget to close one of the three open tags, or to close them in the wrong order perhaps. With the second "good" example, it would be hard to forget to close the one tag you opened.
• There are browsers for visually impaired and blind people designed specially to parse a page and then read back it's contents. Additionally, there are browsers built into many portable devices such as PDAs and cellphones. These types of browsers understand pages different than a standard computer browser, and using semantic code that describes the content properly will help ensure these special browsers can still understand your page (again, without sacrificing the visual appearance of your page in regular browsers).
• The shorter code will download faster (don't expect to go from a 3 second page load to a .5 second page load just by changing out font tags to h# tags, however)
• It is easier to switch out designers, and have multiple designers work together, when they can work through a single CSS file rather than multiple HTML pages trying to pick out design aspects.

There are other related reasons semantic code is a good idea to use, but it all comes down to separation of design and content. If you do this, you'll find that making updates to your site is easier, your site will be more accessible, and search engines will be able to read your site easier too.