Semantic code: What? Why? How?

Paul Boag

Web designers like to throw around a lot of jargon. So, I want to focus on the more popular techno-babble and try to dispel some of the mystery. First up: semantic code.

What Is Semantic Code?

Even if you are not a web designer, you are probably aware that your site is written in HTML. HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing.

Semantic code returns to this original concept and encourages web designers to write code that describes the content rather than how that content should look.

For example, your web designer might have coded the title of your page like this:

<font size="6">
   <strong>This is a page title</strong>
</font>

That would make the title large and bold giving it the appearance of a page title, but there is nothing that describes it as a title in the code. That means a computer is unable to identify this as being the page title.

To write the same title semantically so that a computer understands that this is a title, you would use the following code:

<h1>This is a heading</h1>

The appearance of your heading is defined in a separate file called a “cascading style sheet” without interfering with your descriptive (semantic) HTML code.

Why Is Semantic Code Important?

One reason why semantic code is essential is that without explaining what a piece of content is, a computer has no way of knowing. The ability of a machine to understand your content is vital for two main reasons:

  • Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless the website clearly explains them. In other words, semantic code aids accessibility
  • Search engines need to understand what your content is about to rank you properly on search engines. Therefore, semantic code tends to improve your placement on search engines, as it is easier for them to understand.

However, semantic code has other benefits too:

  • As you can see from the example above, semantic code is shorter and so downloads faster.
  • Semantic code makes site updates easier because you can apply design style to headings across an entire site instead of on a per-page basis.
  • Semantic code is more straightforward for people to understand too, so if a new web designer picks up the code, they can learn it much faster.
  • Because semantic code does not contain design elements, it is possible to change the look and feel of your site without recoding all of the HTML.
  • Once again, because the design is held separately from your content, semantic code allows anybody to add or edit pages without having to have an astute eye for design. You describe the content, and the cascading style sheet defines what that content looks like.

How to Ensure a Site Uses Semantic Code?

Unfortunately, no tool can check for semantic code. It is a matter of looking at the code and seeing if it refers to colours, fonts or layout instead of describing what the content is.

If looking at code, all sounds a bit too scary then an excellent place to start is by asking your web designer if he codes semantically. If he looks at you blankly or starts waffling, you can be sure he does not.

At that point, you need to decide if you wish to pressure him into getting up to speed or if you want to find yourself a new designer!

Boagworks

Boagworld