Questions about semantic HTML

My current project to re-template this blog using semantic markup and microformats has raised some interesting questions.

Why use semantic markup?

There are plenty of good reasons to use semantic markup, the main one being that the markup gives context to the content elements. One of the goals of semantic markup is that the content can be understood by a computer in the same way as it is by a human. A simple example is that as a human reading a page, we can easily distinguish larger text on it's own line as a heading. A computer, however will only recognise the fact that the text is larger and on it's own line, it sees the text as no more important that the copy which precedes or follows it. For example;

Is this a heading?

This is a heading.

As you can see in the source code, the first line uses the <b> tag to make the text bold, the second line uses the <h4> tag signifying a level 4 heading. In this case, the stylesheet applied to the page renders a level 4 heading as bold text so visually the effect is identical (at least in this page with the stylesheet applied at the time of writing).

One good reason that it's important for the computer to understand the context is that we increasingly rely on software such as aggregators and search engines to filter the huge amount of content on the web down to the small amount that we have the time to read. We want to see only what is relevant to us and in order to deliver relevance, the software needs to understand the content.

Beyond proper use of HTML tags, why are semantic id values and class names important?

Using id values such as "header" and "footer" or class names such as "blogentry" may not (currently) be fully understood by computers, there are exceptions as I'll get to shortly. Other than planning ahead for smarter software, these values address the another side of the semantic goal, making the markup understandable by humans.

There is a distinct accessibility improvement when a non-visual browser such as a screen reader can tell the user that they are about to listen to a section of the page named "archive" when the visual browser may rely on a background colour to denote the boundaries of the content section.

In many cases, the web designer is not always responsible for updating the content, semantic naming makes it easy for authors to understand the structure of the page and be able to place new content accordingly. This helps with maintaining consistency, especially when there are multiple content authors.

What effect does using microformats have, and do they detract from semantic markup?

I was asked this at the Web Content Strategy seminar last month in London. Microformats are built on the principles of semantic html so rather than detracting from semantic markup, they enforce and enhance the semantic html advantages.

The main reason for using microformats is to standardise the markup used for particular types of content. This is a further example of making the content usable by software. Microformats allow us to embed event information for example in such a way that software could allow a user to import the event details into their calendar application directly from the page.

Hopefully this has cleared up some of the reasons behind why I believe this is an important subject for web designers and developers.

Labels: Design