HTML has been around for about twenty years now and has gone through two main ages — static rendering and dynamic rendering. Static rendering was the infancy of the Web when HTML was used to display the content of documents and links between them. Dynamic rendering came a few years later when browser vendors made the representation of the displayed document modifiable via JavaScript. That was the youth of the Web bringing a new vision of the markup. HTML was then perceived as a means to provide dynamic representation of the content of a Web page; more of an application delivery format than a plain document format.

HTML5 marks the beginning of the third age of the Web in which HTML advances at a brisk pace towards becoming a true application delivery format. HTML5 is not limited to presentation, but also provides a slew of new functionalities for Web and other types of applications.

These days, HTML5 is being discussed a lot and pushed hard as the next big thing for whatever kind of software applications you're involved with. In this article, I'll try to provide an overview of HTML5 and focus on dispelling the hype that surrounds HTML5.

The Hype

First and foremost, HTML5 is not here yet and the World Wide Web Consortium (W3C) is not expected to release any recommendation for at least three more years. Until recently, mindful of the browsers war and how hard you worked to provide users with the same experience regardless of the browser, you would likely have dismissed the argument about an announced but yet-to-come version of the HTML language.

So why are we talking HTML5 today, a good three years ahead of its official release? We talk about HTML5 today because most browsers are already incorporating HTML5 capabilities in their latest versions.

For certain, HTML5 will play the same prominent place in Web development HTML has played so far. In addition, the new features in HTML5 make it possible to build other types of applications. For example, mobile native applications for platforms like the iPhone and Android. I don't know — and anybody really knows — whether HTML5 and JavaScript will form the primary development platform for the years to come, but regardless of that role HTML5 is worth a closer technical look.

HTML5 is not simply markup. It comes tightly bound to CSS3 and ECMAScript5 (the latest JavaScript). In the end, the emphasis on HTML5 is due to the programming power that results from the combined effect of markup, style and script enhancements, plus a bunch of new APIs that browsers implement in a unified manner.

The Good

HTML5 is a rich markup language that incorporates in its standard syntax many common features that developers and designers previously coded by hand in thousands of Websites. Let's delve deeper in some of these.

Semantic Markup

It's common to have a header and footer in pages as well as a navigation bar on the left of the page. More often than not, these features are achieved by using DIV elements styled to align to the left or the right. Most pages today end up with the following template:

<div id="page">
   <div id="header">
   </div>
   <div id="navbar">
   </div>

   <div id="container">
      <div id="left-sidebar">
      </div>
      <div id="content">
      </div>
      <div id="right-sidebar">
      </div>
   </div>
   <div id="footer">
   </div>
</div>

The template includes header, navigation bar, footer and a three column layout in between. The markup alone, however, doesn't produce the expected result. For that, you need to add ad hoc CSS styles to individual DIV elements.

With HTML5, you still need to use the same bit of CSS to make the page look compelling and place segments where they belong. However, you now can describe the page in a much easier way, replacing generic DIV elements with more semantically meaningful elements such as HEADER, FOOTER, and ARTICLE. Here's how you can rewrite the preceding template with newest HTML tags.

<header> ... </header>
<nav> ... </nav>

<article>
   <aside>
      ...
   </aside>
   <section> ... </section>
   <section> ... </section>
   <section> ... </section>
   <aside>
      ...
   </aside>
</article>

<footer> ... </footer>

The NAV element logically groups links that would go in a navigation bar. The ARTICLE element represents the container of any content for the page and incorporates ASIDE elements and SECTION elements. All these are block elements and must be styled properly to form a presentable page. Other new elements complete the list of enhancements such as FIGURE and DETAILS. The FIGURE element is designed to include figures with caption whereas DETAILS replaces the canonical hidden DIV that developers use to hide optional content and display it via JavaScript. The DETAILS element just offers a clear semantic and an appropriate collection of attributes.