Best practices for efficient HTML5 coding

by Jean. 22 Comments -

HTML5 is quickly becoming the standard in terms of front-end coding, and as a web developer you definitely need to know how to code HTML5 websites. After almost two years of HTML5 coding, I have compiled this list of my favorites “best practices” with the hope that it will be as useful to you as it is to me.

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!

Comments (22) - Leave yours

  1. DJ Rony said:

    Great.. just awesome. I needed some info on HTML5 and this helped me to start. And the cheat sheet will be in my collection. I am just curious about one thing more clearly- if someone want to make his own HTML5 tags/code then where should he start?

    • mitch said:

      I dont think anyone can create their own HTML5 tags. If you are looking for a template, you can easily find one on google, yahoo, etc…

  2. adam collins said:

    Thank you for this really useful blog on useful tools when coding website using HTML5. I always ensure there is a backup for browsers that do not yet support HTML5, i usually use Modinizer and i always ensure my code validates. However i have never used a generator or a cheat sheet before however after checking these features out i will definitely be using these when coding websites in the future.

  3. Shikiryu said:

    Hi,

    I’m pretty glad you like my app :)
    I follow this blog for a long time, I was “wow, they’re talking about me!” :)
    Thanks a lot and don’t forget : if something needs to be add to the generator, just contact me and I’ll think about it.

  4. valeriy said:

    Awesome stuff!! Between cheatsheets and having proper feedback forms, you will quickly learn that html5 depends on your niche. whether the niche is tech savvy (IE9+ mozilla) or not (ie6). haha plan according to your audience

  5. Edwin Yip said:

    Great! The page template generators is time-saving , it really gives inspiration to me about implementing the file template features in the live html editor (LIVEditor) on which I’m working currently. Thanks.

  6. Jamie said:

    Well, I tried using these html tips and glad to let you know that they are very useful indeed. Keep posting.

  7. saha said:

    Fantastic sharing. I’ve used SwitchToHTML5. It is time saving and easy to use. Quality checking is necessary after coding. Thanks for sharing your experience.

  8. Shekhar said:

    Jean,

    Can you please explain me how these two things helps for efficient code:
    1.) Use a generator
    2.) Use a cheat sheet

    Using a generator: just for creating a skeleton – it helps nothing
    Using cheat sheet: you don’t know what tag you need to use & try searching in cheat sheet – does not make any sense – efficiency not at all.

    I doubt on validating code also. Yes it will help to code good & keep standard your page but its not efficiency. Learn basics of HTML5, how it works, what you can use today, what Native API can help you achieve better – these could be a efficient way HTML5.

    Anyway, that’s your thought – never mind :)

  9. JoeFlash said:

    Just a note: <!doctype html> is not recognized by older browsers. For proper backwards compatibility the word DOCTYPE must be capitalized: <!DOCTYPE html>

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!