HTML began back in early 90’s when a physicist by the name of Tim Berners-Lee created the spec for HTML and wrote the first browser and server software to share and collaborate on documents. In 1991, HTML was described to the public in a document called “HTML Tags”, and the world has not been the same since.
The purpose of HTML was to make collaborating on documents easier by allowing shared read/write access to documents through the internet. Now, over 20 years later, nothing has changed except for one thing: our expectations. We, as consumers of HTML, still use HTML to collaborate on documents but our definition of what a document is has changed. For this reason, HTML needed to evolve not to change its foundation, but rather to encapsulate what we as users need from our documents.
This evolution is the HTML5 movement.
One of the key differentiators between previous versions of HTML and its latest version is the core technologies that define it. HTML4 and below has always been about the markup itself and nothing else. With HTML5, we are expanding the technology to include the new ways we write our documents.
Semantics in HTML5 refer primarily to the enhancements being defined the to the markup language itself. A number of new tags, input types, and element attributes have been added to our beloved document object model (a.k.a. the DOM) to provide developers, screen readers, and web crawlers better metadata to understand the structure of our documents. No more should we have to use 100’s of div tags, rather we can properly define headers, footers and even navigation with the markup itself.
Offline and Storage
Just like any good software, people expect that they should be able to access their documents without a network connection, and even be able to save their changes. HTML has this covered with the Offline and Storage category of features. New features include defining files to cache to ensure that the user can use the app offline, relational databases, and even a file access API. These features truly help define how HTML applications are no different than natively installed apps.
Not only have we evolved what a document means when it comes to HTML, but we have evolved the devices that we use to consume these documents. From Internet Refrigerators (no really, look), Smart TVs, and Smart Phones, we have plenty of devices that bring new, yet common, capabilities that impact to how we read and write our documents. The Device Access category includes specifications for features like geolocation, file system access, and even contact and calendar access that can provide developers with a common API to access devices regardless of the make or model.
Although it might seem silly to have a category dedicated to connectivity in a specification that assumed being connected to the internet, our definition of what a document is today requires it. More and more, users require connectivity not necessarily to just view the document buy to collaborate and connect to other components and services. This category includes specifications that define standards to communication not just between client and server, but also between two clients.
It is hard to remember of a time where audio and video was common practice on the web. The multimedia category encompasses the new Audio and Video tags added to HTML to allow us to share audio and video from within our documents, without requiring a plugin or proprietary software.
3D, Graphics, and Effects
Some, including myself, would argue that video game are one of the driving forces behind the evolution of computer technology and HTML is no different. Having rich graphics and effects, along with 3D graphics, provide us a method to create a whole new way for people to engage with our “documents” that we share via the web. This category includes specifications for the Canvas tag, SVG inline HTML, and WebGL.
Performance and Integration
The web wouldn’t be what it is today without CSS. CSS3, the latest version of CSS, has received its own category to capture the new and improved ways in which we style our documents, which includes features such as drop shadows, rounded corners on elements, and even transitions between CSS rules.
Now that you know the high level breakdown on how we can define HTML with HTML5, it is fair to say that you might not care about all of the parts considering there are so many. As you move forward, I suggest you ask yourself this question:
What parts of HTML do I actually care about?
Depending on how you think it can be applied to you current or future project, that might be one or more categories or even only part of a single category. In the end, it makes the most sense to pick one or two HTML features that you like and focus in on understanding those, along with which platforms and/or browsers support it. Remember, HTML5 is a specification implemented by vendors, not a framework.
You can browse all the features of HTML5 at CanIUse.com and even see which web browsers are supporting the features. If you want to get into the details of the specifications and how they are progressing, check out the W3C. Finally, if you want to dive deeper into using the specifications in your own applications, check out the wiki at WebPlatform.org.
In my next post, we move on from understanding HTML from a high level, and move deeper into some of my favourite features.
Thanks for playing.