HTML5 Tips, Tricks and Techniques

Posted July 28th, 2010 in HTML and CSS and Offsite Articles

The post "HTML5 Unleashed: Tips, Tricks and Techniques" over at w3avenue has a really good introduction to HTML5 covering new features, browser support, semantic markup, form enhancements and more, along with some screenshots and demos.

Article Summary

From the article:

Can we use HTML5 today? What can we do with it? Is it really going to kill Flash? You must have noticed a gradual increase in the frequency of these and similar questions being asked, debated and even answered. In my opinion, you must answer such fundamental questions yourself.

The whole purpose of this article is to help you get started with some basic guidelines and easy to follow code templates. If you are familiar with the basics and want to take things to the next level, you will also find several useful resources providing more tips, tricks and techniques.

It then goes on to cover the following topics:

• HTML5 Features
• Check for browser support
• Important changes to note
• Semantic markup (replacing <div>s with more meaningful tags)
• Form enhancements
• Audio and video without plugins
• 2D drawing with Javascript using the <canvas> element
• Making content editable
• Drag and drop
• Persistant data storage
• Additional resources

Read the full article here.

My comments

This is a great introduction to HTML5 for those already familiar with X/HTML. I'm not particuarly keen on using Javascript to make the new tags/elements work in Internet Explorer* because, in the unlikely event your IE visitor does not have Javascript enabled, the site will almost certainly look completely broken.

( * IE won't allow tags it doesn't know about to be styled so you cannot unfortunately declare e.g. article { display: block; } in your style sheet and expect it to work in IE. )

I've personally started using these tags in some of my newer websites but done a workaround to allow it all to work still in IE by also including divs with classes or ids that replicate the names of the new tags. You can read about this in my Getting Ready For HTML5 post.

Other than that, I've also used the new persistant data storage method which works wonderfully in the browsers that support it.