Because I’m new to HTML 5, an introduction is perhaps in order – more for my sake than my readers.

HTML 5 is an extension of HTML 4 and XHTML 1. It gives web developers new functionalities for a more dynamic and improved user experience. This bit is interesting to me because the emphasis is now given to users, not only us developers.

head and body

It allows for better cross browser compatibility between mobile, desktop, netbook, pda, e-reader and whatever gadget there is in the future with the ability to display a web page.

Kevin Purdy from the Lifehacker sums it all rather neatly:

HTML 5 is a specification for how the web’s core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

The Technicalities

We often define class or id to any major <div> for styling on CSS such as <div id="header"> or <div id="footer">. In HTML5, most common div like header, footer and side content now have their very own element: <header> (for header block), <nav> ( for navigation menu ), <article> (for content), <section> (for generic document inside content), <aside> ( for side content ), and <footer> (for footer block). For a developer like me, this simplifies the entire development process and reduces page load time without the need to assign class or id to your markup.

Remember the long url and <object> or <iframe> tag for fitting video into your website? HTML5 comes with a nifty solution – the <video> element. It can now easily embed video without using the object element. There is some debate about the codec we should use as default, though. You will find an interesting attempt at breaking down the codec debate here.

For the table-base web site, the <td> element is no longer allowed in <thead>. Besides improving page load, I find it useful for the tricky bit when I need to add emphasis to a certain content. I have been using <span> frequently, ranging from font and font color change to adding a different hue to background. HTML5 utilizes <mark> instead of <span> to highlight these content. I look forward to this.

The most stunning thing for me about HTML 5 is the contenteditable attribute. Any element with contenteditable attribute will allow the designated user to add and edit text on the web page, without having to use an editor. And it’s all LIVE.

HTML 5 also packed up the input element with more control, one of which is <input type="tel">. This will automatically change the input box format for telephone number. For the large input box such as comment box, i often use “textarea”. But there are new member of “textarea” in HTML5 called “textLength”. So that, we can easily define the length of the text inside the input box no matter how big the box is. Another cool thing about HTML5 is the capability to drag and drop pretty much anything. It allows you to drag and drop information block on a web site such as URLs, files, bookmarklets and anything into a drop zone. This was achieved by javascript before. To be able to do this with only markup is a refreshing change.

Another new element worth a mention is <nav>. Current HTML relies heavily on CSS to get navigation to work with <ul> or <ol>. In HTML5, <nav> will float the links side by side automatically.

It is also a lot easier to arrange the layout with HTML5. The <hgroup> allows you to group headings, letting you manage headers more effectively. If your content is heavily embedded with video, table or photo, you might want to give <figure> a try. This elements will allow you to add caption for your embedded content. You also can used <figure> element in conjunction with the <legend> element to provide a caption for the contents of your <figure>; element.

Dropped

Apart of the new elements, I noticed that a few deprecated elements have not made it to the latest version. They are <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.

All in all, HTML5 is packed with cool new features, code slimming advantage and a few slick solution to the current way we build front-end. While it attempts to solve issues found in earlier iterations of HTML, HTML5 also addresses the needs of Web Applications – an area previously not adequately covered by HTML. To end with an understatement, it will also change the way we use the web in the future.

(Photo by Anja)