If you’ve worked in the world of the internet at any point in the past few years, there is a good chance you’ve heard of the hot new technology that is HTML5, and there is a similarly good chance that what you’ve heard is largely hype and buzzwords. While HTML5 does offer a great deal of flashy new technologies to the web toolbelt, there are subtle and more significant aspects which often go unnoticed. Before we get into that, though, let’s brush up on some HTML history.
In the beginning, there was text
Up until the early 1990s, the web was largely text based. There was little text formatting, no images, and no structure beyond what you could achieve in a plain text document. Then in the ’90s, HTML was adopted as a way to visually format and structure text within the web browser, which lead us into the era of table-based layouts.
tables
An example of an email coded with tables
For those of you who never had the fortune of building websites in the ’90s, table-based layouts were the equivalent of creating an entire website using an Excel spreadsheet. Tables were never meant for anything beyond displaying tabular data, but at the time they were the only HTML element that allowed us to create horizontal layouts. For example, sidebars and multi-column layouts were made possible thanks to HTML tables. It wasn’t until the early 2000s, when CSS was adopted, that we were able to move away from hacky, table-based layouts, and take on a more semantic approach to development.
The idea behind CSS (cascading style sheets) is that the structure of a web page and its design should be kept separate. This allows us to reuse more code, making our websites faster, and also swap out styles and designs quickly and efficiently. CSS also offered us more control over visual layout and formatting. Thanks to CSS we could create the multi-column layouts (and much, much more) we are used to today, and do it in a semantic way, meaning every HTML element had a role and it should only be used for that role (i.e. tables should be used for tabular data).
This shift to semantic web development allowed us to start defining what our webpages mean through proper use of HTML, which in turn allowed computers to make more sense of our content. This was only the beginning, however, and leads us directly to HTML5.
What is HTML5?
I get asked this question a lot, and it’s a hard question to answer. Technically HTML5 is a new language specification for HTML, but many other new technologies have been thrown under the HTML5 umbrella, which has turned HTML5 into a nebulous collection of technologies rather than any one thing in particular. For those of you who remember the Web 2.0 craze, HTML5 could be considered Web 3.0.
Some of the flashier technologies included under the HTML5 umbrella allow us to do things like manipulate the user’s webcam, render creepy 3D eyeballs, and create dynamic, 3D user interfaces. While these are all amazing and groundbreaking for the web, none of them are purely “HTML5”. They are HTML5 used in conjunction with other new technologies.
So what is HTML5 then? The major contribution of HTML5, on its own, is that it allows us to further define the meaning of our content. In fact, HTML5 goes beyond meaning and allows us to define the intent of our content. Let me repeat that again, because this is the true importance of HTML5.
HTML5 allows us to define the INTENT of our content.
Not only can we define what an element on a page means (ie. this piece of content is a paragraph, or a heading, or a link to an external resource), but it allows us to define the purpose of our content. Computers don’t inherently know the difference between an “About Us” page and a blog post, or a blog post and a list of content related to said blog post. But, with HTML5, we can give computers hints. For example:
- The `<article>` element is used to specify content that is independent of the content around it, and is meant to be distributed by itself (think article or blog post).
- The `<aside>` element is used to specify content that is tangentially related to the main content (think recent or related blog posts).
- The `<nav>` element is used to specify a group of links that are used to navigate a site, as opposed to linking to resources that support the content.
If you’re still not convinced of HTML5’s importance, think of it this way: by defining what our content is, and what purpose it has, we allow search engines and possibly other, future technologies to make more sense of our content, which in turn improves content sharing, curation, and discovery in a huge, yet to be defined way. When combined with its umbrella technologies, HTML5 is the next leap in the evolution of the web and will fundamentally change how we communicate and interact with each other and our content.
Caveats
While all of this (hopefully) sounds great, not all is sunshine and rainbows when it comes to HTML5. In particular, there are two major issues that I see. The first is that the specification itself is still a work in progress. While most features have been solidified by now, some parts of the language have changed from the first drafts of the specification, or been removed entirely. The second is browser support. All modern browsers support most of the HTML5 standard, as well as a good portion of the technologies under the HTML5 umbrella. The problem, though, is 10% of the population still uses Internet Explorer 8 or 9, and we’re stuck with one foot in the past until both of these are obsolete.
Conclusion
So what’s the takeaway from all of this? The technologies associated with HTML5 are making the our content more dynamic and interactive, and are essentially improving the user experience of the web. The new HTML specification, on the other hand, is the scaffold. It provides more robust structure and organization. It is the means by which we classify the flora and the fauna of the web. New HTML elements may seem trivial, but the ability to better define our thoughts, content, and architecture improves our ability to connect and share content.
