Introduction to HTML5

Posted on March 11th, 2011

This article serves as an introduction to HTML 5. This version of HTML is not supported in all browsers. Even some browsers that claim to support HTML 5 do not support all the features available in this version of HTML. Although supporting some/all features of a language is not new to browsers overall, what is new about this is that HTML 5 itself is new, and some of its features are works in progress, especially when it comes to user security. This article is the first of two parts.

As far as the browsers are concerned, I am using Firefox 4.0 Beta 6 to test the examples illustrated in this article. The reason for this choice is that Firefox has better support for the HTML 5 features than other browsers (Opera does a good job at supporting HTML 5 as well). To write the HTML code you can use any text editor (I am using Notepad++).

So what is HTML 5 and what does it bring to the table? This new standard of HTML, XHTML, and the HTML DOM was a cooperative work between the W3C and WHATWG (Web Hypertext Application Technology Working Group). HTML 5 contains new features such as canvas, audio and video elements, new content specific elements (like article, header, footer, and section…), new form controls (calendar, date, time, email…), and better support for local offline storage. In the following sections, we will explore some of those elements in detail, using examples where appropriate.


The HTML5 work stems from the WHATWG (Web Hypertext Application Technology Working Group), and their focus is the development of HTML and APIs for web applications. The reason it came to life back in 2004, founded by people from Apple, Mozilla and Opera, was a worry about the direction W3C were taking with XHTML, and no focus on HTML or the real-life needs for web developers.

It got really interesting in July of 2009, when W3C announced that XHTML2 would be cancelled in favor of HTML. This means that the only future development of HTML and XHTML is in the form of HTML5 – HTML5 is the future, whatever you think about it.

I should also mention right away that HTML5 is spelled just that, with no space between the the L and 5 – read more in Spelling HTML5.

What is HTML5

So what is HTML5, really? Basically, it’s about extending HTML/XHTML with new more semantically rich elements, deprecating attributes, introducing new attributes and altering how some element and attributes are allowed to be used. Hand in hand with that is the possibility to use attributes for WAI-ARIA to make a web page more accessible, such as with landmark roles.

Backwards compatibility & progressive enhancement:

I think one of the main reasons behind the adoption of HTML5 is that it sets out to be backwards compatible and work with the web browsers there already are in the market, and have been for some time, too. This is done through new elements which, generally, have no particular look or behavior attached to them, but rather offering more semantic richness and then up to you style them via CSS according to your liking.

Tags: , , ,