When You Don’t Have a TARDIS: HTML5 Tips and Tricks

The best way to crush it with HTML5? Here’s a four-step process:

  1. Invent time machine.
  2. Step in.
  3. Travel to October’s HTML5 Developers Conference in San Francisco.
  4. Indulge in many excesses, including HTML5 immersion.

Until you own your own TARDIS, though, you’ll have to settle for the Internet. We’ve asked our programmers for a few quick-and-dirty tips for HTML5, and here’s what tops the list for must-haves in your repertoire:

Not Your Uncle’s Shim

My Uncle Fred hadn’t heard the saying “Measure twice. Cut once.” The results were cherry beds and dressers that leaned ever-so-slightly askew. His remedy was shimming — stuffing the spaces with slivers of wood. He never claimed to be Norm Abram, but he built functional, beautiful pieces, and no one was the wiser.

You can do the same with HTML5. Shimmy your code to provide backward compatibility with old browsers using polyfills, fallbacks or shims (shivs) like this one from freelance designer and programmer Michael Musgrove:

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

The Container Store of Markup Languages

One undisputed benefit of HTML5 is its ability to store data in a web browser instead of utilizing cookies. This local storage saves the information even when web pages expire. Cassandra Wolff highlights this simplicity in a variable-setting script:

<script type="text/javascript">
    localStorage.setItem('preferredLanguage', 'EN');

Once your script is established, the user can close the browser but still access the variable upon return:

<script type="text/javascript">

Pay No Attention to the Man Behind the Curtain

Seeing uninitialized HTML in what should be a welcoming website ruins the magic of a site visit, doesn’t it? This exposure is exactly what happens if your JavaScript doesn’t catch up to put things in order. Peter Vogel, a columnist at Visual Studio Magazine, offers some advice: Make the loading screen not appear by triggering a new event and hiding HTML. Here’s the code for the animation that shows when a page is loading:

<div id="preLoad">
 style="width:48px;" />
    <br />Loading

This event is triggered once the JavaScript loading is complete:


Insert this line of code to hide the loading screen:


SEO Smack Down

Bloggers disagree on whether HTML5 makes a whit of difference in SEO results. After wading through the opinions, you’ll find that, at the very least, HTML5 obliquely improves SEO by garnering more attention for pages. One trick you can use to improve SEO is the tag. Internet marketing entrepreneur Scott Langdon advocates the following:

  • <article> tags to show availability for syndication, giving the piece more weight
  • <header> tags to reduce confusion for bots and people
  • <section> tags to make sections smaller so Google bots pay more attention
  • <footer> tags to organize your work

The Real Reason We Love HTML5

In October 2013, programmer Josh Goldberg faithfully recreated Super Mario Brothers, a cherished childhood game, using HTML5 and the <canvas> element. His impressive piece of programming immediately went viral, attracting nearly 2.7 million unique, Mario-loving visitors. Unsurprisingly, Nintendo cited copyright infringement and asked Goldberg to remove the game. He complied on November 1, and the Internet wept.

Despite the applause for Full Screen Mario, HTML5 has received some negative press due to missing dev and ops tools and its overall lack of uniformity. Its prevalence, however, is certainly on the rise, and smart developers and programmers frequently take advantage of the many ways that HTML5 improves their coding and enriches their website.