HTML5 is powerful not only in its new features, but in its simplicity.
But when the buzz of HTML5 escalated to celebrity-like status, it made it hard to determine what’s fact and what‘s misinformation. This new version of HTML is fast becoming the poster child for every cool-but-unrelated bell and whistle out there.
So, let’s go beyond the buzz and understand how HTML5’s new features can improve your site.
What is HTML5, exactly?
HTML5 is a new version of HTML4 and XHTML1 – the code types used on most websites today. HTML5 builds on the existing framework of those languages, so updating your site does not have to mean starting from scratch. Most of HTML5‘s new features are solutions to common problems that developers previously used outside technologies to solve (needing Flash plugin to display videos, needing javascript/server-side code to validate forms, etc.).
What’s so great about HTML5?
In my opinion, the best part of HTML5 is its Design Principles. This foundation is what makes the new features of HTML5 so intuitive and effective. Straightforward rules like avoiding needless complexity, not exposing users to code errors and having the users’ experience come first.
What are HTML5’s new features?
Here’s a top-level view:
- Video and audio elements: Previously, online videos needed plugins like Flash to view movies or listen to content. With HTML5, video and audio support is now browser-native. This is great news, especially for displaying A/V content in mobile devices that cannot utilize Flash. Currently, MP4, OGG and WEBM files are the contending video formats in the various browsers, but fallbacks allow you implement this HTML5 feature right now. In fact, as you read this, YouTube is testing an HTML5 version of its site.
- Canvas elements: A new pixel-based graphic area to display dynamic charts, graphs, visual effects, filters, web apps, games and more. The drawing of canvas elements is done in javascript, giving the area full interactivity. Canvas elements also have a fallback option, should the browser not support the new functionality.
- ‘Obvious’ semantic tags: Programmers have been using workarounds like <div class =”header”> for more than a decade with XHTML. But why not just call it a <header>? HTML5 now uses ‘obvious’ tag names like <header> for many common page areas: section, nav, article, aside, header and footer. Internet Explorer needs a little help understanding these new tags, but a little script and CSS fixes the issue.
- Microdata: This feature helps define common types of content like events, companies, people, products, ratings/reviews, etc., so that browsers/computers/search engines can understand them. You can implement microdata now, and as browsers continue to add support you will begin seeing options to import contact info into your local address book, add events to your calendar app, or pinpoint a location on a map. Microdata also has SEO benefits; use Google Rich Snippets to start adding events, people and reviews to your search results.
- Local Storage: Contrary to the song, cookies were not good enough for us (sorry, Cookie Monster.) They didn’t allow for larger storage of information, and slowed down site load time. So, HTML5 introduced Local Storage to fill the need. Though some recent articles have pointed out privacy concerns, Local Storage is no more a security threat than other current data containers like flash storage, PNG files and javascript.
- Form input types: More variety has been added to forms too. Left/right sliders can select from a range of numbers, date pickers make short work of calendar tools, color pickers to customize on-page element design and added features to the typical search box. Some input types like “email” can even change mobile device on-screen keyboard layouts, making it easier to type in an email address. And for those browsers that don’t understand the new types, the feature will degrade gracefully and the form will still function normally. Form validation is also included in the spec, and is expected to replace the myriad of javascript and server-side options once this HTML5 feature becomes more widely supported in browsers.
Other functionality such as geolocation, drag and drop, inline SVG support and editable elements is also included in HTML5’s specifications.
Can HTML5 be implemented now?
Yes, you can add elements of HTML5 to your site now. No need to wait 11 years (when the W3C expects all HTML5 elements to be fully supported) when you only need a few select elements. For browsers that do not support certain HTML5 features yet, there are some options available to accomplish the same functionality using alternate methods. We always recommend checking which browsers your visitors use (via web analytics) most to provide the best solution.
How well does HTML5 work with older browsers?
Each HTML5 element has varying support with older browsers (IE7 and below, Firefox 3.5 and below) HTML5 handles backward-compatibility in some features by providing a fallback option should the browser not recognize the code. In short, older browsers will display what they are able to. Then, if the browser comes across something it doesn’t understand, it will look for a fallback option (if provided), or just skip over it, rendering the rest of the page.
For more information on browser support, check out this interactive chart of support for HTML5 features, or visit this website to see which HTML5 features are supported by your browser.
When do I need to update my site’s “old” HTML4 or XHTML1 code?
Don’t worry – there is no deadline. HTML4 and XHTML1 will continue to work and be fully supported by browsers for the foreseeable future. Browsers (by necessity) are built to liberally accept a variety of code formats/previous versions/errors/etc.
Where’s the difference between HTML5 and XHTML?
The main distinction is how precise the code is. XHTML was built to be strict to help cross-browser consistency: it required all lowercase characters, wrapping all attributes in quotes, and adding a slash (/) to all tags that didn’t have another closing tag. HTML5 is much more flexible; you can break all of those rules (and a few more), and still have your page look the same on multiple browsers.
Wait, I heard HTML5 had more features than that. What about shadows and rounded corners?
A key point to understand is that HTML5 does not include CSS3 or its features. HTML5 creates the page content/structure/functionality. CSS3 is the style applied to that page. Yes, CSS3 has its share of cool new features like web fonts, shadows, animations and more, but we’ll get to those in a later article. Understanding the separation of content and design helps create a fine-tuned site that is search engine optimized, fast-loading, and well organized.
Have you implemented HTML5 in your website? Tell us about it!