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?
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.
- ‘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.
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!