How to use HTML5 today with full cross-browser compatibility?

HTML5 is a hot buzzword for UI Designer and Developer; many designers are hesitant to embrace this new technology because of lack of full cross-browser support and cross-browser support truly not going to happen with HTML5, that means we are hiding behind the lack of cross-browser compatibility, Why? It may be to avoid learning new technology. We should wake up with this fact that full cross-browser support for HTML5 is not going to happen. Some user will use older browsers, some will have the browser with deactivated JavaScript and some will have certain plug-in not installed in their machine.

How to use cross-browser compatible HTML5 markup?

HTML5 is defined in a way that it is backwards compatible and there are n-number of new features in HTML5, some of them can be used today like <header>, <footer>, <section>, <article>,<nav> etc. These elements have added more sense to an unstructured markup, there is not so much difference between HTML4 and HTML5 from web-developer standpoint, just some <div> elements have been replaced with meaningful names.

HTML5 is still a long way off but we can start using it from today and HTML5 semantic markup can be bring into play, thanks to HTML5 enabling script to get IE to acknowledge the new element like <header>, <footer>, <section>, <article>,<nav> etc. you can either download the script or refer the path for script as given below.

Remember: Upto 8% of user use web with javaScript turned off. So, while making decision to use HTML5 in your next project, know about your user first or use the progressive enhancement by taking one extra div in all the HTML5 elements.

Steps to use HTML5 today

Download the HTML5 Demo with full cross-browser compatibility or create cross-browser HTML5 markup by using following steps.

Steps

Use the <!DOCTYPE html>
To enable the HTML5 Element in IE use document.createElement or call the script
Ensure that new elements like header, footer, section, nav etc. are block-level
header, footer, section, nav {display: block;}
<nav> element to create navigation menu – top level, sidebar or in footer.
<header> element to wrap any heading, logo, top-level navigation everything above the main content.
<footer> element to wrap meta data, bottom links, page footer everything below the main content.
Use the <article> element for the content like post.
Use <section> element for the container which is used in HTML4 like <div id=”container”>
Use <aside> element for any block of information which is related to main content.

Download the HTML5 Demo

Comments

2 responses to “How to use HTML5 today with full cross-browser compatibility?”

Vijay

May 14, 2011

I am UI developer too and I agreed your blog that lot of developers hesitate from HTML 5 because of cross browser compatibility and not very used to with HTML 5 new tags and structures. I hope your blog will help us to use HTML5. Keep it up…

Lovelina

June 16, 2011

Your valuables blogs are always helpful to us in implementing in our projects.
Keep writing such blogs as it’s a good source of learning for the designers and web-developers.

Keep up the Good work..

Collect Dots