Best practices for efficient HTML5 coding

Use a generator


When building a website, you often start with a base template that you customize to fit your needs. Instead of writing all your HTML5 code from scratch, you can save time by using one of those very useful online HTML5 generators. Using them is definitely easy: You fill a basic form to set up desired options, you click on a button and a basic HTML5 template is available for you to use.

There are quite a lot of HTML5 generators, but my favorites are definitely SwitchToHTML5 and Shikiryu generator, which have more options.

And if you prefer a ready to use template, the HTML5 Boilerplate is a must have.

Use a cheat sheet


With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. One of the best tools to keep an eye on HTML5 tags and property is definitely those up to date cheat sheets, created by InMotion Hosting.

The cheat sheets are broken up into three easy to print images: Tags, Event Handler Content Attributes and Browser Support.
All three cheat sheets can be downloaded here.

Be careful with compatibility issues


HTML5 is a new technology. You can already use it but right now, but you have to remember that several specifications have not been implemented in some browsers.

Can I Use.com is definitely a website to have in your bookmarks if you’re coding HTML5 websites. It is the most complete tool to quickly know if an element is supported by a specific browser. CanIUse.com also contains compatibility charts for CSS3, SVG and JavaScript.

Know how to enable HTML5 on older versions of IE

Internet Explorer have always been a pain for web developers and designers. I’m pretty sure that most of you remember when in 2006 or 2007 we had to take lots of time to get things working (almost) correctly on IE6… Although IE’s newer versions are a lot better than what IE used to be, the IE developer nightmare is not over yet. In fact, IE 8 and below do not understand HTML5 at all.

The good news is that a small script allow you to enable HTML5 on IE 8 and older. Using this script is pretty simple, just paste the following code in the <head> section of your HTML5 document:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Another very useful tool to consider is Modernizr, a complete JavaScript library that helps you build HTML5 website that works perfectly in all browsers.

Using Modernizr is pretty easy. Just go to this page to specify which HTML5/CSS3 properties you plan to use, then download the generated script. Include it in the <head> section of your document, and you’re done. Modernizr will detect which features can be used in the client browser and will add classes to the <html> tag. If a feature is supported by the browser, that feature is added by name as a class to the tag. If the feature is not supported, the class is added and prepended with “no-”.

Use elements correctly

Before HTML5, we used to code websites using lots of <div> elements. The biggest problem with this technique is definitely that source code can quickly become hard to read. This is why HTML5 introduced new tags to be used instead of the good old <div>.

Those new tags includes header, footer, article, section, aside, nav and more. A basic, but semantically correct HTML5 document should look like the following:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <header>
	...
  </header>

  <div role="main">
	...
  </div>

  <footer>
	...
  </footer>
</body>
</html>

Validate your code


After coding a page in HTML5, the fastest and most efficient way to make sure that your code is semantically correct is indeed by validating it. The good old W3C validator can validate your HTML5 pages and show you if you made any mistake. A great tool for quality check!

Advertisements

About Saran

Hello there!!! I'm Saravanan, born and living in India. The main reason i decided to start this project it was because there should be a way to transfer my knowledge which i experimented in flash to all. i try to concentrate as much as possible all kind of issues can appear to someone is developing an Flash application. If you need help, or if you would like to see in this blog some issues, send me an e-mail to rksaran@rediffmail.com Follow Me: twitter:http://twitter.com/rksaran Best Regards, SRK
This entry was posted in Web Development and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s