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.
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.
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.
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>