Coding in HTML5

If you’ve visited our site before, chances are the first thing you thought to yourself when the page finished loading today was, “Wow, the site looks different–and it loads much faster!” Yes, we’ve completely overhauled the Element-80 site, giving visitors easier access to the information they really need (like our services, portfolio, and FAQ) while letting the blog take a back seat.

Given the current state of modern browsers’ standards-compliance, we took the opportunity to transition the site to the far more semantic, SEO-friendly HTML5. While still in development, the foundations of the HTML5 Web standard are widely supported by all contemporary standards-compliant browsers. And with a few tweaks, sites coded in HTML5 render beautifully in older standards-compliant browsers and remain usable in Internet Explorer.

The HTML5 Difference

Coding in HTML5 was an adventure! We’ve been faithful adherents to XHTML Strict and Transitional markup for years, so making the switch from <div>-heavy pages and templates to the far more descriptive HTML5 markup was a definite process, one we’re still adjusting to. However, the semantic <article>, <section>, and <aside> elements, along with the very helpful <header>, <nav>, and <footer> tags make for much easier to read and visualize code. Markup and CSS is also more easily optimized without the need for dozens and dozens of nested <div>s with endless unique element IDs creating the flow of a layout. Pages load faster with the optimized, semantic markup possible with HTML, and making changes is much easier without a glut of non-semantic <div>s to sort through.

Making the Transition

The ease with with you can code backwards-compatible sites in HTML5 leaves no excuse to procrastinate on making the transition in your work process. Generally-speaking, with a bit of CSS (stylesheet resets are something you really ought to be doing anyway) and a little IE-specifice markup, you can have fantastic, fully-semantic HTML5 code that renders properly for virtually all users.

If you’re already coding in valid XHTML markup, then there’s no pressing reason to switch over to HTML5 as your sites will continue to display properly in new browsers. On the other hand, it is definitely worth investing in learning to code in HTML5 for future projects and upcoming overhauls, including those as basic as transitioning a site into standards-compliance. Since the overwhelming majority of currently-available browsers support a significant amount of HTML5 features, there is absolutely no justifiable reason to not take advantage of them.

Backwards-Compatibility

New elements and features in HTML5 degrade nicely in browsers that do not support them. For example, the incredibly nifty <input type="search">–which displays as a MacOSX finder-style search bar in Safari complete with a dynamically-visible “×” button for clearing entered text from the field–will simply be rendered as a standard single-line text field in browsers that do not support the HTML5 search-type for forms. As always, the elements can be styled with CSS to integrate with custom designs implemented on your site regardless of HTML5 support of your browser, so your forms can maintain a consistent look-and-feel in either environment, and high-level block elements will function like any other old <div>, even though they feature far more semantic names in HTML5.

Futher Reading

The best resource we found in developing our site with HTML5 is written by the incredibly knowledgable Mark Pilgrim. His Dive Into HTML5 site has a wealth of information, is beautifully laid out, and is rich with examples of usage and explanations on how to ensure your site remains usable for visitors without HTML5 browser support. Even a quick browse through the contents will have you well on your way to honing your skills with HTML5 markup!

Also worth checking out:

• Wikipedia: HTML5
• HTML5: The Facts and the Myths
• HTML5Rocks
• HTML5 Gallery