Embrace HTML5

developer

Craig, our Front End Developer explains that the web industry is moving along at a rapid pace and trying to keep up can be quite tricky. Here’s what he has to say about embracing HTML5:

New web technologies are being released on a more regular occurrence. Yes, we will never have full cross-browser support for these new technologies, but as long as you know the audience you want to address and you provide suitable fallback options for legacy browsers… then why should you be held back?

The biggest leap over the past decade has been the invention of HTML5. HTML5 is more an evolution and combination of three technologies (HTML, CSS and Javascript) into one specification. It’s come at the right time too. Since Apple does not support Adobe’s Flash technology on its mobile devices, animated Flash based websites have steadily declined. Lets be honest though, we all want to see things moving around with loads of interactivity on websites. Adobe, not to be outdone by this have created an application called Adobe Edge Animate (http://html.adobe.com/edge/animate/showcase.html) which converts your completed animation into HTML and CSS code ready to be viewed in modern browsers.

HTML5 and Search Engines

Currently Google does not promote or penalize a site being written in HTML5. However, as we all know Google search engines are getting smarter all the time, so writing your website code in HTML5’s cleaner and semantic fashion could theoretically provide more weight to the content on your site and help to boost your all important search rankings in the future. Each version of HTML introduces new markup but there has never been so many new additions that relate directly to describing content. So as a basic example you would normally structure your page using tags and the heading section might look something like this:

<div id="header">
         <h1>Header Text</h1> 
         <div id="nav"> 
                <ul> 
                     <li><a href="#">Link</a></li>
                     <li><a href="#">Link</a></li>
              </ul>
         </div>
</div>

This code is fine as it is but we can clean it up even more using the new HTML5 tags to replace the division tags:

<header>
   <h1>Header Text</h1>
   <nav>
      <ul>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
     </ul>
   </nav>
</header>

Browser Support for HTML5

All major modern browsers support HTML5 these include Firefox, Google Chrome, Safari, Internet Explorer 9 and Opera, however earlier versions of Internet Explorer do not recognize the new HTML tags. There is a work around to this by using a bit of Javascript to force the browser to parse the new elements. So for example in your script file you would have : document.createElement(“header”). This lets the CSS engine know that the element exists and would then allow you to structure and style that element in the legacy browser.

Great Reasons for Developers to use HTML5

There are loads of new features, not all are down to HTML directly but as a whole including CSS and Javascript combined you can create some amazing stuff.
• New Doctype
No longer need to remember or rely on your IDE to create the XHTML Doctype :

Replace this with
• New native form features
Form validation
Autofocus on form fields
Placeholder text

• Video and Audio
No longer require additional 3rd party plugins to run.

• Canvas
Allows you to draw, create games and animations using code (no need for a drawing or animation software)
Some great examples : impressive-html5-canvas-experiments/

• GeoLocation
http://html5demos.com/geo

• Web storage
Web pages can store data locally within the user’s browser. This is normally done with cookies but web storage is more secure and faster.

And loads more. (See additional resources below)

Sum Up

From more descriptive tags to animations and improved multimedia support, developers using HTML5 have a lot of new tools to build better user experiences. Browser support will continue to improve and evolve at a rapid pace. WordPress now ships out with its default theme written with HTML5 markup and seeing that developers have been using it in their projects for well over 2 years now is testament that we should all be using it now. It is the future and you certainly do not want to get left behind.

Additional Resources

http://www.html5rocks.com/en/
http://html5doctor.com/
http://www.w3schools.com/html/html5_intro.asp

c_static_index