I have recently had reason to skin a WordPress blog for a client. Rather than simply modify one of our previously created themes, I decided to download and work from a blank template by WordPress themselves. All WordPress’ templates are currently HTML5 compliant, so I had some fun working with that, and that’s what this post is about: HTML5.

Content Tags

Specifically, in this case, the new set of HTML5 tags that we can use to identify the type and purpose of the content on the page. Previous versions of HTML were designed specifically for markup, so they only worried about how the words and images were placed on the page relative to each other. No care at all was given to the meaning or relative significance of the words. HTML5 brings us much closer to a proper XML system by allowing both layout and structural tags, to tell the browser not only where to place things, but also what the various parts of the code represent.

To demonstrate, previous HTML code might have looked a little like these examples below:

As you can see, these layout structures tell you nothing at all about the content of the page. In contrast, HTML5 might look something like this:

Even without knowing anything about HTML, you can tell from that code where the important information on the page will be kept.

But what does it do?

That’s great and all, but it has no effect on the display of the page at all. The information is all laid out the same – all this new stuff is hidden away in the code. So you may be asking yourself why your Internet Explorer browser cares whether it is displaying a header, footer or navigation part of the page. Well, it doesn’t. But browsers aren’t the only things that read your websites these days. Search engines also read your code directly, and they do care which parts of the page are significant. They care a lot.

More about this tomorrow…