What I did it. What did I learn.

I recently transformed my personal website from HTML4 to next generation of HTML – HTML5 (Hyper Text Markup Language version 5). Read my earlier post if you are interested to learn more about Evaluation of HTML. There are lots of hype about this new version. I thought I should adopt new standard and learn this new way of coding HTML page. If you are thinking to switch to HTML5 like me or in process of adapting, following few important points to bear in mind.

First and foremost question. what is HTML5 contains? HTML5 contains HTML5 markup + CSS3 + JavaScript APIs. HTML5 is not yet an official standard, and no browsers have full HTML5 support. Before you completely switch your pages in HTML5, significant point to keep in a mind that HTML5 is not a W3C recommendation yet. it is ongoing and making a great progress day by day.

Following what I learned while switching from HTML4 to HTML5:

1.) Internet Explorer (IE) still commands a large percentage usage share of web browsers. With this high usage percentage it is important to ensure that your webpage functions correctly in IE. Regardless what browsers your visitors are using it should work fine. Good news is that you can implement this HTML5 IE enabling JavaScript code into your page and bingo! This is the JavaScript workaround to enable HTML5 elements in earlier versions before IE 9 that do not support all elements. It is an excellent way to get IE to acknowledge the new HTML5 elements at this point. Keep in a mind that it may change tomorrow. I was unable to view my page in earlier versions of IE 9 but once I implemented this code in my page, now I be able to view my webpage accurate even in IE6.

2.) All coding structure elements such as doctype, navigation, footer, article, etc. became more simpler, clean and has now more meaning to it. If you are like me who like to hand code HTML then you will love this trait. For example, the doctype. The doctype declaration should be the very first object in an HTML document, even before html tag. You don’t have to remember writing long and different declaration codes so that browser knows what type of document to expect. It is important that you specify doctype in all HTML documents. There are three different doctypes in HTML 4, now in HTML5 there is only one. Isn’t this amazing?

3.) One of the popular elements of HTML5 is the canvas element. The canvas element is used to draw graphics on a web page. It has several methods for drawing paths, boxes, circles, characters, and adding images. It uses JavaScript to draw graphics on the web page. But, if you are one of those who absolutely hate JavaScript or coding, this is not must feature. This is good to have not must have element. So don’t get confused that you have to learn JavaScript. You can still use images in your webpage. If you are using image as a background image like I am using on my webpage, you don’t have to add image in the canvas element. You can still use as a body background image.

4.) One of the common misconception is that HTML5 will kill Flash. HTML5 cannot generate animation or interactive elements like Flash does. It should not be considered a replacement technology for flash. Currently the majority videos are shown through a Flash plug-in and that will change as HTML5 has native capability for playing videos and audios. You don’t need to choose, because they can work together. At the moment, I have not deployed any interactive element such as video or audio on my server but I will do it in future so stay tuned.

5.) Common tags such as center, font, u, big, etc are not supported in HTML5. Instead of spending lot of hours troubleshooting, I would suggest that you read a good book or authorized online websites. I used w3schools.com as my quick resource. I also found lists which contains supported tags, descriptions, attributes, etc. See below links in the reference section.

Fortunately, that day is not far when HTML5 will be one-size-fits-all solution means all browsers will support HTML5 and designers/developers do not have to spend their half life working on browser workarounds.

References:
There are actually three sites from W3C pertaining to HTML5 that you can use. There is the main draft (http://dev.w3.org/html5/spec/spec.html), a reference guide (http://dev.w3.org/html5/html-author), and a comparison document (http://dev.w3.org/html5/html4-differences/) that points out the differences between HTML5 and the current standard HTML4.

Working Draft (WHATWG)
This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version. (http://www.whatwg.org/specs/web-apps/current-work/multipage)