If you’re in the technology sphere, no doubt you’ve heard that HTML5 is quickly becoming one of the hottest new technologies on the block. While the hype around it has been relatively recent, HTML5 has actually been around since 2008. Its cutting-edge functionalities have gotten kudos although concerns about its compatibility across browsers have limited its adoption. The goal of this article is to explain some of the benefits of HTML5 and best practices for its usage so as not to sacrifice cross-browser compatibility.

Benefits of the New Markup

While HTML5’s new media elements *

Complementary to these new functionalities, the most significant improvement introduced by HTML5 has been the addition of semantic meaning. Previously used layout elements such as the meaningless <div> can now be replaced with HTML5’s *<header>, <article>, <section> or

* to name just a few. Each one of these new elements can be interpreted differently by web browsers and search engines thus adding an element of specificity. These new elements are also supported selectors that can be used in CSS3 and jQuery.

Yet another plus of using HTML5 is the positive impact it can have on search engine optimization (SEO) efforts. Web crawlers can more easily understand how websites are laid out and how information is architected in HTML5 than in previous versions of HTML. Best practice would dictate inclusion of Accessible Rich Internet Applications (WAI-ARIA) attributes in HTML5 markup to increase SEO and enhance user experience.

Cross-Browser Compatibility

Even though HTML5 is backwards compatible, one of the biggest fears of users is that it will not be compatible with older web browsers such as early versions of Internet Explorer, Mozilla Firefox, Opera and Safari. The good news is that there are tools available to make HTML5 compatible for all browsers. For example, CSS3 PIE, ie7-js and selectivizr enable some new features of CSS3 in older browsers. Other tools such as ExplorerCanvas, Webforms2 and HTML5Shiv provide partial compatibility support for HTML5 as well, especially for Internet Explorer. Additionally, Modernizr is a small Javascript library that tests the browser being used and allows feature detection to comprehend what a web browser can and cannot actually do. It then renders websites based on those specifications

Another new and different approach is to use a plug-in such as Google Chrome Frame to inject a modern browser’s rendering and Javascript engine into ancient browsers. Google Chrome, as many of you probably know, is one of the leading modern web browsers that supports the bulk of HTML5’s features. This method however is user-dependent and is not recommended as highly as utilizing one of the previously described tools to detect features and render websites following a browser test.

HTML5 in Motion

At DOOR3 we create accessible, rich and powerful web applications using HTML5 in conjuction with any necessary tools to fully support all web browsers. We also implement HTML5 over other platforms such as Drupal, CakePHP and ASP.NET. Please feel free to contact us for more information about these cutting-edge technologies.

So, are you afraid of HTML5? You can be sure DOOR3 isn’t. Contact us today!

Need more help?

Think it might be time to bring in some extra help?