Semantic Code – Does it Really Matter?

April 16, 2011 at 10:52 am

Semantic code is a popular buzzword in web development, but does it really matter for you and your website or is it just more techno-babble for marketers to shout about? Before we look at this, we should make sure we know what semantic code actually is, and why we use it.

What is Semantic Code?

Semantic code is a particular method of writing the code for your website. You probably know that websites are written in a markup language called HTML. This language was originally meant to describe what the content of a document was in terms of structure and hierarchy. Over time developers began to use HTML to style the website as well. This moves away from the core, descriptive purpose of HTML and turns it into a means for making a website aesthetically pleasing.

Take, for example, the title at the top of this post. Non-semantic (and rather ugly) code might describe it as follows:

<font style="font-family:Cambria; font-size:1.9em; font-weight:bold;">
	Semantic Code - Does it Really Matter?
</font>

To a regular viewer, the above code would create something that looks exactly the same as the title at the top of this post. The size and style of the text would then signal to the viewer that this is the title. However, to the computer, there is nothing in there that signifies this bit of text is any more or less significant than the rest of the article, and so the computer (hint: think search engines and screen readers) would not know this was the title.

In semantic code, however, signalling which chunk of text is the title couldn’t be easier:

<h1>Semantic Code - Does it Really Matter?</h1>

The H1 tag signals to the computer that this is the page’s main title (Heading, level 1). This H1 tag – and all others on the site – can then be styled with an external CSS document (Cascading Style Sheet).

In short: Semantic code means using (X)HTML to describe what the content is and CSS to describe what it should look like.

XHTML and CSS, combined properly, can create perfect semantic code

Is Semantic Code Important?

Yes. To assume that semantic coding practises are an optional extra could prove disastrous for your website. So why does it really matter?

We mentioned that without semantic code, computers find it hard to interpret your website. This has major implications for screen reader applications, which read the contents of a website out loud for the visually impaired. In this respect, semantic code benefits your website’s accessibility.
In a similar vein, search engine crawlers rely on clean, semantic code to correctly understand and navigate a website. If you don’t help them with this, they won’t be doing you any favours with your rankings. It’s as simple as that.
As you can see above, semantic code takes up less space, so your site will take up a little less room on your server, eat a little less out of your bandwidth and take a little less time to reach your viewers.
By controlling the layout and style of (X)HTML elements with external CSS, you can make site-wide changes by editing one file., This vastly cuts down on maintenance time and improves aesthetic consistency throughout your website.
Some web browsers are incapable of rendering fully styled web pages (this used to be a common problem with mobile phones) and so they will either remove the styles completely, or substitute in their own styles. Having correct, content descriptive markup helps them to do exactly this.

Knowing if You’re Using Semantic Code

We touched on this in our CSS Naked article:

The best way to find out if your site uses semantic code is to ask your designer. If they can’t give you a straight answer, dodge the question or run away to Google “semantic code” then you can be reasonably sure your the answer is “no, sorry, it doesn’t”.

If your site does use semantic code, congratulations! You’re already benefiting from all the features listed above. If it doesn’t, maybe it’s time to re-think who you trust to engineer your online presence?