Back in 2005, while you were browsing MySpace and listening to Hollaback Girl, there was an invisible battle being fought behind the scenes of your browser. The prize? Total control of the way your content was presented.
The World Wide Web Consortium (W3C, since we’re buds) wanted to replace HTML with XHTML 2, a complete rewrite of the way HTML looks and works. A group of web superheroes from Apple, Mozilla, and Opera didn’t like this. In fact, they demanded more semantics and structure and wanted to keep the foundations of HTML. They decided to form their own group (a geek Justice League, if you will) called the Web Hypertext Application Technology Working Group, or the WHATWG. Their charge: HTML5.
As you can probably gather by the title of this article, the WHATWG won the battle and XHTML 2 is dead. In fact, XHTML 2 has been dead for just over 2 years now. With that in mind, you may be asking yourself, “Nick, why isn’t my company using HTML5?” The answer is simpler than you think: your company probably doesn’t know about HTML5 or its benefits.
But fear not, fellow warrior of the web! I’m about to hit you up with some HTML5 features and talking points that will satisfy the concerns of all team members.
1. HTML5 Allows For Multiple <h1> Tags
The original HTML specification was written back when websites were tiny and static. You know, when nothing ever really changed on a page? The exact opposite of what happens online today. With the not-so-recent explosion of online shopping and blogs, websites are growing more dynamic by the hour, let alone the day.
Website for the movie Space Jam: static since 1996.
With that in-mind, the WHATWG introduced a new semantic tag called <article>, which, essentially, tells the browser that the chunk of content contained in the tag is unique to everything else on the page and, therefore, has its own structured importance. Translated into plain English, using <article> means that every blog post, every product, and every search result can have its own <h1> tag. If this doesn’t get your SEO people salivating, nothing will.
2. HTML5 Makes It Easier For People (and Search Engines) To Find You
As I mentioned earlier, the WHATWG were charged with creating a more semantically-nuanced language. And that’s exactly what HTML5 is. HTML5 features a ton of new tags that allow you to specify the exact intent of your content to the search engines, while the presentation to the user remains unchanged. Some of these new tags include: <time>, for time codes, <cite>, for the title of a cited work, <q>, for quotes, <dfn>, for abbreviations or jargon, and <address>, for contact info.
For example, the <time> tag allows you to specify the data/time when you publish an article. The user will still see “February 2nd, 2012” (or however you choose to format it), but now the browser will understand that this is a date and not just a random collection of alphanumeric characters. Neat, huh?
3. HTML5 is Backwards Compatible
One important distinction between HTML5 and XHTML 2 is that HTML5 is backwards compatible. Older browsers (like the ancient IE6, the not-much-better IE7, and the getting-there IE8) can still read HTML5. Though they most likely won’t be able to interpret HTML5’s more advanced semantic tags correctly, text-based content will still display.
As of the writing of this post, 32.78% of users in the U.S. are running those older browsers, a number that declines daily as more users choose modern browsers like Mozilla Firefox or Google Chrome.
What if a sizable chunk of your audience uses these older IEs? Don’t fret; there are ways to make HTML5 and IE6/7/8 play nice. Keep reading, friend.
4. HTML5 is the Preferred Choice of Mobile Browsers (Flash is Dead)
You may have heard that Adobe recently decided to kill Flash for mobile devices, citing poor performance, vulnerability, and a lack of standards. Instead, Adobe has decided to bask in the warm, loving embrace of HTML5.
In the last two years, thanks to technology like the iPhone, mobile browsing has exploded. In fact, it now makes up for 6% of all browser usage. That might not seem like much, until you consider that mobile browsing increased by 600% from 2009–2010. In fact, according to mobile usability expert Luke Wroblewski, mobile browsing will outpace desktop browsing by 2013.
Of that aforementioned 6%, roughly 80% use a browser that supports HTML5 and does not support Flash. So if your company is looking to tap into the exploding market of mobile browsers, I’d go with HTML5.
5. HTML5 has a Flash-like Tag
Rapidly decreasing Flash usage has some people on the web a bit bummed out. Flash is still a robust toolset for creating media, but it’s not very standards friendly. So, what if you want to create Flash-like experiences with HTML5? The WHATWG’s got you covered with the handy <canvas> tag.
Here are a few examples of <canvas> in the wild: Ball Pool, Blob, JS Cloth, and The Arcade Fire’s The Wilderness Downtown.
6. HTML5 has Native Video and Audio Tags
Another reason that most developers are alright with letting Flash go the way of Betamax is that HTML5 comes with its own video and audio elements, surprisingly, <video> and <audio>. Now you can show off your sweet product demo without having to load Flash.
You may be saying, “But Nick, what about my poor grandmother who still has Internet Explorer 7? How will she be able to see my awesome demo?” Easy peasy, lemon squeezy. HTML5 allows you to specify Flash as a fallback. If the browser can’t figure out what the <video> or <audio> tags are, it will use Flash; if it picks up what <video> or <audio> is throwing down, then Flash won’t even be loaded.
YouTube is one of the services taking full advantage of HTML5’s new capabilities while still serving content to older browsers.
7. HTML5 + CSS3 + Modernizr = The Future, Today!
Just like Oprah or (the late great) Steve Jobs, I’ve saved the best for last aka one more thing!
HTML5 was lucky to have been developed in confluence with the third iteration of the Cascading Style Sheets specification, or CSS3. CSS3 allows for newer presentation elements that could previously be done only with nasty image slicing, like rounded corners and gradients. Usage of CSS3 greatly cuts down on development time and speeds up browser performance because images no longer need to be loaded.
Since HTML5 and CSS3 are not supported by every browser, developer Faruk Ates created Modernizr, a toolkit that allows non-compliant browsers to render HTML5 tags and load alternate styles to a page based on the browser being used. In plain English, if Modernizr detects that a browser doesn’t support rounded corners, it will allow you to load an alternate style that has image-based rounded corners. Modernizr can be a deterrent to the usual, “It needs to look the same in every browser!” argument while still allowing for the latest and greatest designs.
So, I’ve barely scratched the surface of what HTML5 can do for you and your website. HTML5 also supports brand new form elements, native drag and drop, local databases for offline usage, native geolocation, and much, much more.
Hopefully this post will open the door to the new frontier that is HTML5. If you have any questions about HTML5, CSS3, or how to use these technologies today, please feel free to email me at: email@example.com.