My Tech World

Semantic HTML – What is it; Why bother?

The web has moved on a long way from having all the structure made up from tables and dozens of barely-relevant animated images thrown around the page (although some people still need to be told). As sites are now starting to conform to a best-practice approach of separating out content from presentation, the next initiative needs to be placing more context around that content. There is a lot of focus placed on the Semantic Web and associating ontology with page elements, but the more important first step is to ensure that your HTML structure is meaningful and well-formed. This idea of using the correct HTML tags and their individual attributes is Semantic HTML.

The tendency of designers when they build a web page is to concentrate on what the site’s visitors are going to see. This visual respresentation is only part of the picture, however. Other visitors to the page are going to be looking for completely different characteristics. Search engines will not be looking at your pretty layout and they’re not going to be interested in your colour scheme. What they’re looking for is the content and structure of your page. It’s this information they will be using to sort, rank and classify your site.

The other often-overlooked audience is the vision or mobility impaired user. Colours and flashy pictures are far from a priority for this group when all they will ultimately want is easy access to the information they’re trying to read on your page. Having a sound context around your HTML tags will make this task that much easier.

How to Apply Semantic Markup

So having established what semantic HTML is, how do you actually apply it?  Generally speaking, there is probably very little in the way of new HTML elements that you would need to know.  What is different, however, is what you include as part of those elements.  Let’s take a couple of common HTML tags as examples: the hyperlink – <a> and the table – <table>.

Links

On the whole, a link is used to retrieve another resource (other web pages, documents, etc).  However, authors can express other relationships between resources than simply “activate this link to visit that related resource”.  Link relationships can be defined using the “rel” attribute (or occasionally “rev”, but this is rarely used).

Link Relations are actually quite powerful.  They enable a search engine, user or other semantic framework (have a look at Open Calais) to derive more context and meaning from the link than just a reference to the destination alone.  So what would a link relation look like?

My Twitter Account

Notice if you look at the markup, you’ll see

rel="me"

in there. As you can probably guess, this marks the link destination as being related to me. That is, “the author of the referenced document is also the author of this page”. Have a look at MicroFormats.org for a full list of relation attribute values.

Tables

Tables are a much more involved element, with several contituent parts that are often forgotten.

When you insert a table into a page, you’ll typically add (at a minimum) something like this:

Example Row
Example Data

A table is designed to represent a matrix of data. It should have a <tbody>, <thead> and <tfoot> element. But to be really usable, it should also contain a <caption> element and a

summary

attribute.

The <caption> element describes the table. It can be viewed as essentially acting as a heading for the table.
A summary should provide an extensive description of the table. It is intended to provide non-visual users with the equivalent of a “quick scan” of the table to best understand the purpose it serves.

Why Bother?

Semantics in HTML is important because it adds one further vital dimension to the content of that page: meaning. Providing context around the text that you have on the page allows other users and other processes to extract, understand and use relationships between the content on the page and the references from it. It organises a page in such a manner that it will be understood regardless of the method by which the page is accessed. It should be equally understandable whether seen or heard and it is that key – understanding – that you are trying to ultimately achieve with every page that you create.

Tags: HTML, Semantic Web, standards, UX, web development