Let’s have a look at the structure of a HTML 5 website, as many of you will be familiar with the content management dubbed “WordPress” we will emulate a basic 2 column HTML 5 web page.

The picture below represents how a HTML 4 page would look.

HTML 4 Structure

And the picture below represents how a HTML 5 page would look.

HTML 5 Structure

As you can see above the page is very simple yet also very clean, HTML 5 has plenty of new elements which effectively make it easier to structure pages and also helps browsers have more control as to how the web pages are displayed. Once all the big named browsers are compatible with HTML 5 you should notice faster loading times, easier navigation and much richer content.

Structure of HTML5

Most web pages contain common structures like headers, footers, sidebars and main content areas. In HTML4 designers/developers use <div> tags to differentiate and style these different sections. While this works fine, the problem is that it is difficult to process these pages because they lack semantics.

HTML5 introduces a set of new elements that makes it easy to structure your page through the use of tags like: <header>, <nav>, <article>, <aside>, <footer>, etc.. The potential of this is huge – for example, search engine will be able to figure out where your main content resides and index that section only. But, the diagram below shows that elements like <header> and <footer> can be used more than once on a single page where they behave more like classes and normal HTML elements that you can use over and over again to retain a semantic structure.

While multimedia content/rich internet applications are extremely popular online, the format used by different providers differs a lot. HTML5 aims to make the multimedia platform more open by replacing all propriety formats. It also makes the embedding easier. Right now, developers have to resort to using different scripts or players to stream audio and video content online, but with HTML5 embedding multimedia will get easier through the user of tags like <audio> and <video>

HTML5 canvas elements allow you to dynamically draw graphics using JavaScript. This will be helpful to create canvas for charts, graphs, animation or simply diagrams like flowchart. The <canvas> element is already supported by most browsers.

HTML5 has numerous APIs that open the doors for future Web applications. It will be possible to do application cache, offline data storage and drag and drop right in the browser without downloading any Plugins or ActiveX controls.

HTML 5 compatible browsers

With the growing interest in HTML 5 coding many browser manufactures are preparing HTML 5 compatible browsers, currently only Apples Safari is fully HTML 5 ready, Mozilla Firefox 3.5 “supports” the new coding but is not 100% compatible as of yet and as for our friends over at Microsoft their internet explorer still does not recognize HTML 5 reference as of yet (luckily IE9 will support some of the new features 1279170035_package_toys.png).

It shouldn’t be long before all browsers are 100% compatible as HTML  5 has been designed to make things easier for browsers to render a web page, powerful applications, rich multimedia, stunning designs are all on their way to a computer screen near you.

Please note that HTML5 is still a working draft and thus not stable across all browsers. For a list of HTML5 elements and features as supported by different browsers, please visit the Comparison of Layout Engine page.