What Is HTML5, Really?

What Is HTML5, Really?

HTML5 is the hot new technology buzzword used in the news constantly. At least, in the nerdy tech news. If you have even a passing interest in the web, you've probably heard it. But what is HTML5, really? And why is everyone talking about it? I'll walk you through the basics, with a sprinkle of technical mumbo-jumbo, to explain it so you can impress all your friends at the next cocktail party.

HTML stands for Hypertext Markup Language, which is a set of formatting rules that web browsers use to display a page. Essentially, HTML tells the browser where different chunks of content go on the page, and how they should look. That was pretty much the extent of the language up until version 4. This new version, cleverly called 5, seeks to add a host of new functionality to HTML. For example, in the past if you wanted your page to display an animation, or really anything that moved, you had to use Flash or GIFs. HTML5 adds new drawing tags that allow it to render animations and even complex video displays straight onto the page.

HTML5, though, really is a concept more than a single item. It commonly refers to HTML, Cascading Style Sheets (CSS), and JavaScript. These three things working in harmony can produce some truly amazing results. HTML has an overarching goal of maintaining simple, easy-to-use and easy-to-read code, while CSS and JavaScript allow nerds—err, programmers—to build more complex fare.

HTML is, if you will forgive a simple analogy, the Skipper on a certain three-hour boat tour. It's the boss who, while not a complex fellow, has the charisma to maintain order and communicate a message. CSS is his 'Lil Buddy. The helper who does all the hard tasks, like formatting fonts and colors and polishing a thousand other details so that HTML looks really good (when CSS does its job right, that is). And JavaScript is the Professor, the brains of voyage who can build a chat room out of coconut shells and string.

One of the main new features added to HTML5 is the ability to render video and audio natively, without resorting to a plug-in like Flash, QuickTime, or (shudder) Silverlight. And not just show a video, but do fancy stuff with it (if you bring the professor, JavaScript, along). Take a look at this example: http://craftymind.com/factory/html5video/CanvasVideo.html.

In case you ever need to blow up a video, you can now do it in HTML5! But seriously, the ability to play videos natively should be a huge boon to simplify web development. That is, if everyone can agree on a format standard. Currently there is a "standards war" going on between browser makers that ensures you need four (4!) different versions of your video if you want to make all browsers happy. Not quite the universal reach that HTML5 strives for, but progress always starts roughly.

Besides the new multimedia tags, another goal of HTML5 is to bring more structure and semantics to web page layouts. Several tags have been added to facilitate this, such as: section, article, header, and nav. If you use these tags properly, a browser will understand the content on a page better. It will be able to discriminate between items that are navigation, such as menus and buttons, and actual content. Tools such as search engines and content management systems (CMS) will also use this information to return better query results and manage content in a much smarter fashion.

HTML isn't the only piece that's incrementing its name. CSS is moving to CSS3, with the goal of becoming more modular. Having CSS3 split into functional modules means a developer can pick and choose which parts are needed and ignore the rest. It also means the development community that contributes to CSS can work on certain sections in isolation and not worry about what's going on with the other modules. Currently there are more than 40 published modules so far, including Selectors, Namespaces, Color, and more.

As mentioned above, CSS is the spit-n-polish of web standards. It allows developers to actualize all the crazy ideas that designers come up with, from fancy color schemes and fonts, to wild layouts. It also allows more efficient control of a website as all those formatting rules can be centralized in a few files that are referenced by the entire site. So when your little startup company gets bought out by Google for millions of dollars, it takes just a few changes to alter all the colors and logos throughout the site.

JavaScript, while not getting an official increment in its name, has experienced a steady evolution over the last decade. It is much more of a true coding platform than HTML or CSS, yet is still considered lightweight by most developers. But as browsers continue to improve their JavaScript engines (such as Google Chrome's blazing fast V8), the ability to do more complex functions with JavaScript is becoming a reality.

A common name for some fancy JavaScript is AJAX, and one of the most widely used implementations of AJAX is Google Maps. Whenever you grab that map tile and move it around, AJAX is communicating with the Google servers to retrieve that information for you, almost instantly. While AJAX is not an actual change in the JavaScript language, it is a great representation of the increased ability of browsers to efficiently process large amounts of data using JavaScript. This opens the door for full-on web applications based inside the browser, and open-source libraries like jQuery allow developers to build applications with enormous time savings.

So, all that sounds great in theory, right? But how about some examples of cool HTML5/CSS3/JavaScript sites? I'm glad you asked:

Cool stuff, right? So why isn't everyone building awesome HTML5 stuff yet? Well, it turns out it's not quite the as-advertised panacea yet.

The first issue with HTML5 is compatibility across browsers. As it stands, only about 40% of users in the wild are using a browser that supports some level of HTML5. While the browser wars have reheated to a pitch we haven't seen since the late '90s, users aren't quite as motivated to upgrade constantly. Microsoft recently released IE9, its most HTML5-capable browser to date, but developers are dealing with 11% of the browsing population that is still using on IE6!

In addition to supporting all the new fancy tags in HTML5, browsers also have to interpret all the new CSS3 code. There are already hundreds of documented bugs across the various popular browsers. As more and more are discovered (as quickly as new browsers are released), developers have to build more and more workarounds, or "filters" as they're called, to account for them. The end result is a reverse of the intention of these new standards: instead of simplifying workflows, it is rapidly complicating them, and increasing development schedules many times over.

How bad is the problem? Check out these links to get a rough idea. The HTML5 Readiness site tracks each browser's implementation of key new features. The HTML5 Test will show you the score your browser gets for HTML5-readiness.

Here are some scores we found for the market-leading browsers (out of 400 max):

  • Google Chrome: 293
  • Internet Explorer 9: 255
  • Firefox 4: 240
  • Safari 4: 228
  • Firefox 3.6: 155

You can imagine the nightmare this creates for a developer. No single browser is even close to full support, and each of them varies in the type of support it contains.

And how about "safe" platforms, where the environment is tightly controlled and the manufacturer has openly stated its support for HTML5? Something like Apple's iOS devices?

  • iPad, iPhone4, iPod: 206

Just barely 50% support! Not quite the commitment a developer can count on.

In addition to compatibility issues, HTML5 has to deal with performance issues. Since its capabilities are still raw and cutting-edge, it can tax even the most modern CPUs. Try opening these links and watch your system monitor light up like a Christmas tree.

And finally, the addition of all these new features to the native browser environment means more security risks. It's a simple formula: the more your browser can do, the more harm your browser can do. We're just starting to see the first inklings of new viruses and malware that can be implemented with HTML5, but hackers won't truly put their efforts into it until more browsers support all the features.

So, with all these pros and cons, you may find yourself asking, "Should we be using HTML5 now?" Like all of life's important questions, the answer depends on what you're trying to do:

  • Add required functionality for a specific audience? YES
  • Reach the widest possible audience? NO
  • Avoid Flash? YES
  • Improve performance? NO
  • Show off? YES
  • Simplify development? NO

While all of this may sound like HTML5 is rocky ground, rest assured it has a bright future. All of the tech giants are throwing their gorilla-weights behind it. While the official "standard" of HTML5 may never be completed, that doesn't really matter. It's up to the browser manufacturers to make it a reality. And like all new technology, it will evolve over the next few years to become something truly useful, and not just a haven for coding geeks to steal all of your CPU cycles. Microsoft has even gone so far as to implement it beyond the browser, and directly into Windows 8: http://www.youtube.com/watch?v=p92QfWOw88I

If you get the opportunity to use it now, go for it. You won't hit every browser out there, but you will hit the users that are most excited about these changes. The ones who will demand more functionality and greater compatibility across the Internet.