As a web designer—someone who designs and writes code for a living—I tend to get caught up in the technical parts of the business of content. I think about servers, browsers, and code all day long, so when new technologies come down the pike like HTML5 and CSS3, I get really excited. I mean who wouldn’t….right?

As it turns out, most people, including those who make their living producing content on the web don’t care at all about HTML and CSS, not matter what version happens to be in use. As a blogger, you want the tool that you are using to work, and be a simple as possible. And I agree, on some level, that that is exactly how it should be. But, the shift to HTML5 is such a major evolution for the web that will impact you in many ways that you may not even realize yet. So, with the goal in mind to help prepare you for the future, this article is simply an explanation of what this new language is, and, more importantly, why you should care about it.

The Nuts and Bolts

The web is written with a lot of different programming languages delivered by a lot of different complicated technologies. For the purpose of this discussion, though, simply understand that at its basic core, the web is delivered to you in HTML and CSS (HTML for the content, CSS for the styling and layout). HTML (Hyper Text Markup Language) has been around for a while now.

The important point to know about HTML is that it has not changed in a long time. The last version if HTML, HTML 4 was ratified and approved in 1998 (Historical Context: Google incorporated in Sept. 2008). A lot of things have changed in that time, and one of the goals of HTML5 is to adapt the language to meet the new changes.

For example, HTML4 has no support for video or audio. But wait, you might say, I watch YouTube all the time. Yes, you are quite correct, but the video that YouTube is displaying is shown to you through a browser add-on (plugin) called Adobe Flash. This plugin is so popular that more than 90% of internet connected desktop computers have it, but that does not change the fact that HTML in its native form does not support video on its own. If you have an iPhone, iPad or iPod Touch, you know what happens when you try to watch a flash video on your phone. Because Apple does not allow Flash to be installed on these devices, Flash videos cannot be displayed.

Video is a fundamental part of the World Wide Web and the people who maintain HTML determined that this was a bad idea, so they added support a <video> and <audio> tag in HTML. Going forward, anyone with an HTML5 compliant browser, no matter if it is a phone, laptop, tablet, or TV, can see video or audio content that you put on your site.

It’s all the same web, but not really

Unification of the web, bringing the web to multiple devices and screen sizes, is one of the major tenants of HTML5. As a content creator and owner, you must have begun to realize that more and more people are viewing your content from non-traditional devices like tablets and phones. HTML 4 had no concept of this and so, if you wanted to deliver an optimal experience for those with a smaller screen (and if you don’t think that people are using these devices to read your content, you are dead wrong) you had to create some sophisticated server-side code that would try to determine what kind of device/screen size/capability and forward that traffic to a different “mobile” site (and in some cases, multiple mobile sites). Large companies created these sorts of mobile optimized experiences for different types of phones, but for a blogger, was it really worth the effort?

Fortunately, much like video and audio, HTML5 and CSS3 allow you to have one site delivered to all of your viewers, but automatically show a different optimized version to those on a mobile device. On a standard blog, this might mean loading one CSS file for desktop viewers and a second style sheet for those on a mobile device. If your site is not too complex and your web designer is good, it can be a single CSS file that adapts the content and flow to different conditions such as screen size.

Organization is key

Finally, from a pure content perspective, HTML5 is adding tags to make it smarter about content organization. In other words, HTML5 helps you tell Google and other search engines what your content is about and how it is organized. Every good blogger knows that Google likes one <h1> tag per page (if you didn’t realize this, or don’t know what I am talking about, see below) and it can penalize you for having multiple <h1>’s per page. So you are forced to make some decisions about your text that don’t really make much sense.

Let’s say you are writing a lengthy article about the virtues of HTML5 and you want to separate this article into sections to help your users understand the content better. You know that your post’s title is the page’s <h1> tag. You also realize that you want to add a pithy tagline/subtitle to the post, which you will store in an <h2>. So already, before you have written anything, your first header would be an <h3> and if you have sub headers underneath that, they are going to be <h4>s and <h5>s. Already, your document outline is convoluted and doesn’t really convey the hierarchy on the page or of the content. Not to mention that fact that you as the blogger have to sit down and figure out which headings are going to be which. If you don’t, your page many not convey itself to the search engine and thus not get ranked correctly (not to mention might look odd to the user).

In this example, what would have been ideal is if you could have grouped the title and subtitle together as a a group (because they relate to each other) in the same way that a book has a title page. It would also be ideal if the headers in the main post body were identified as such and grouped together into a clear document outline. Not only would this convey the hierarchy of the content that you wrote, and also make it easier to write because you won’t have to think about the document outline beforehand and plan which headers go where, it would also look better on the page to your reader.

HTML5 provides all of the above and more in an effort to provide a better “semantic” understanding of the page content. Gone are the days of one <h1> per page; instead, HTML5 adds an <article> tag (do not read this as literally an “article”, but rather as a block of related information like a the text of your latest blog post) and a <section> tag as well as a <header> tag, and an <hgroup> tag for grouping headers together. You can have one <article> tag that contains multiple <sections> and, theoretically, each section could contain a <header> and an <hgroup> as well.

Don’t get too hung up on the code but rather think about the concepts here. You can now group content on a page together. In this post, for example, I could put each section inside a <section> tag and then have an <h1> tag inside that section. Clearly defining content relationships just got a whole lot easier. This article might look something like this in outline form:

<article>

<header>

<h1>BLOG POST TITLE</h2>

<h2>SUBTITLE</h2>

</header>

<section>

<h1>SECTION TITLE</h1>

</section>

<section>

<h1>SECTION TITLE</h1>

</section>

</article>

In addition to the new <section> and <article> tags, HTML5 also adds a <nav> tag for navigation (things like your site’s navigation bar or your breadcrumb navigation bar), a <time> tag for conveying dates and times in a clear (international) format that could easily be automatically translated into “local” time for your reader, and several other interesting tags, all added specifically to enhance your readers understanding of your content, a search engine’s understanding of your content, and make your life as content creator easier.

Act Now, Do Nothing!

Ultimately, your are probably wondering what it is going to take to change your site over to HTML5. Don’t worry, though, that is the wrong way to be thinking about this change. HTML5 is not going to render older sites unusable nor will it require you to make any changes if you don’t want to. Your site as it exists today is already HTML5 compliant. This is not an all or nothing proposition. HTML5 is more like a “value add” on top of the web…an enhancement to it.

Over the next 12-18 months, I believe that we are going to see major changes to the popular blogging platforms and content creation tools that people use to write on the web. WordPress, Blogger, Drupal, and Joomla will all be adding support for these new tags. Microsoft will release the next version of Internet Explorer (IE9) which has support for all of the new HTML5 tags. Firefox, Chrome, and Safari already support these tags in their current versions. YouTube has already made changes to the way it handles embedded video to automatically support HTML5 video or Flash, depending on what the user is able to see.

Similarly, as a web designer, I have already begun the transition towards HTML5, and all of the sites that I write going forward will be constructed in this more modern way. If you are in the market for a new website template, it might be a good idea to find one that is HTML5 ready so that you won’t have to make any changes later.

There is a lot going on with this topic, and this article simply scratched the surface of HTML5 and the evolution of the web. I did not talk about CSS3, Javascript, or the <canvas> element here. There is a lot more to this topic; the web as a whole is seeing a major shift in the technology and infrastructure that we use to create and maintain it.

Readers, bloggers, and web designers what do you think? Are you excited for HTML5, or is this something only a web designer would care about? Is it a little more clear how this could help you produce better content? Let me know in the comments!

Best,

Chris