HTML5: The Parts You Care About (Part 1)
This is the first of 3 posts in a blog series previewing the upcoming presentation, HTML5: The Parts You Care About by David Wesst at Prairie Dev Con in Saskatoon, SK this November.
Documents Evolved
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.
HTML5 Breakdown
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.
HTML5 includes HTML markup, Cascading Style Sheets (CSS), and ECMAScript which is most commonly implemented using JavaScript. Because the W3C uses all three technologies to define the specification for HTML5, we can ensure that the right technology is used for the right job. In fact, there are so many new features that needed to be specified that the W3C chose to categorize them into eight different categories.
Semantics
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.
Device Access
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.
Connectivity
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.
Multimedia
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
As the ways we write our documents become more complex, they require better tools for authors (or developers) write them. The Performance and Integration category provides us with new coding tools such as the History API, a selector syntax for finding elements, and even new JavaScript methods to better access the DOM.
CSS3
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.
Next Steps
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.
~ DW