Part Two: The Newest Family Members
In my last entry, I wrote about the HTML 5 family and its history. This entry will be about the latest incarnation of the standards, some of the new features, and why they're important.
Separation of Standards
First, though, based on some feedback on my last post, I wanted to underline the fact that even though I'm referring to HTML 5, CSS 3, and JavaScript collectively as the "HTML 5 Family," these are separate standards, and can be used independently of each other. CSS 3 works just fine with XHTML, and JavaScript works anywhere an interpreter is available.
We often speak of "an HTML 5 application" when really the application in question was made using HTML 5, CSS 3, and JavaScript. It's a sort of shorthand. Along those lines is the term "HTML 5 family." It keeps the shorthand while still underlining the fact that there are different technologies at work, not just the specific technology of HTML 5.
Evolution of Standards
The standards for HTML, CSS, and JavaScript provide a common ground from which browser manufacturers and application developers and designers can work. But as people pushed the boundaries of the technologies, it became clear that the standards had to evolve.
Enter HTML 5. It was designed both to address known shortcomings in the previous standards, and to achieve specific goals.
Backwards compatibility: one of the most important goals of HTML 5 was to not "break the web." The new standard had to be backwards compatible with previous standards, and needed to work with older browsers.
Ease of development: HTML 5 needed to be easier to use. We wanted to leave behind the restrictions of SGML and XML based documents
Future needs: HTML 5 needed to be forward-looking. It needed to cover more than just the structure of the markup and include broader support for applications and rich interactions.
Addressing these goals made HTML 5 depart from previous versions of the HTML standard. First and foremost, HTML 5 is not an application of XML or SGML. The HTML 5 standard is instead a collection of documents that define the markup tags as well as functionality and workflows. This leaves behind the strictures of SGML and XML, enabling ease of use and broadening the scope of the standard to include more advanced functionality.
New Family Features
The HTML 5 family has many new features. There are new HTML tags, new data features, new layout features, and new interactions.
New Structural Tags
What are they? New tags that allow us to be more specific with content structure, such as header, footer, menu, sidebar, and so forth.
What's the benefit? Obviously we've been creating headers and footers using older versions of HTML, so what's so special about these new tags? Before HTML 5, when we created headers (and footers, and so forth) there was no way to specify with markup that these elements were somehow structurally different than regular content. These new tags give is a way to say to the audience, "this part of the content is the document header" and "this part of the content is the document footer." This is a significant improvement in accessibility, as well as allowing automated user agents like search engine crawlers to better understand our documents.
New Semantic Tags
What are they? New tags that allow us to be more specific in defining what some types of content actually are: navigation, output, figures and captions, etc.
What's the benefit? Like the new structural tags, these new semantic tags enable us to be more specific in marking up documents and data. The primary benefits are improved accessibility and search engine friendliness, but they also provide benefits for display and interaction, as we can use these new tags in concert with style sheets and JavaScript.
Audio and Video Tags
What are they? Tags that enable browsers to display audio and video content without using a third-party plugin like Flash or Quicktime.
What's the benefit? Similar to the new structural tags, the new audio and video tags give us the ability to specify in our documents the presence of content that previously we weren't able to specify with semantic markup. These new tags give us the ability to say "this is audio content" or "this is video content" and improve accessibility and search engine friendliness. Native audio and video support also has the potential to be more efficient and less resource-intensive than using a plugin.
The Canvas Tag
What is it? Put simply, the canvas tag provides a way to draw in the browser. These can be simple line drawings or they can be as complex as copying entire images or even frames of video. These drawings can be animated as well.
What's the benefit? The HTML 5 canvas gives a standard way of handling drawing and animation in the web browser without resorting to a third-party plugin. Plus, the canvas tag is a part of the document, so the browser can intelligently integrate it into the content both in terms of visual effects and user interactions.
Data Storage
What is it? The HTML 5 standard specifies new ways for browsers to store data locally. The data can be stored either simple key-value pairs or a SQL database, and can persist even when the browser is offline, or the session has ended, or even if the browser has been shut down and restarted.
What's the benefit? Where the canvas tag provides the possibility of vastly improving the visual aspects of HTML 5 applications, the data storage features of HTML 5 provide similar promises for handling the data that will drive those applications. The ability to be able to store data locally in easy-to-access ways makes it possible to create much more complex browser-based data handling, improving application efficiency, and reducing network load.
Offline Applications
What is it? The offline applications specification gives us direct control over how the browser will handle a web-based application when it cannot access the internet. We will be able to specify local caching rules, rules for updating that cache, and how the cache should behave when the browser is online and offline.
What's the benefit? The offline applications specification will help us create web applications that react intelligently and predictably to offline situations, giving much better user interaction.
CSS Improvements
What are they? The new CSS 3 standard specifies many new but long-awaited visual styles such as rounded corners and gradient backgrounds. It also specifies visual transforms of document elements, like rotation and skewing.
What's the benefit? Previously, to create any of these effects we had to use graphics, often sliced up into bits and pieces and reassembled using a combination of HTML markup, CSS rules, and JavaScript. Using these new rules it will be possible to produce these effects much more simply, resulting in the immediate benefits of speed of creation (no more graphics to create, slice up, and optimize), reduced file sizes (less HTML markup and fewer CSS rules), quicker document download and display, and improved accessibility and search engine friendliness. Also, when combined with JavaScript, these new features can create animation and rich interactions.
JavaScript Improvements
What are they? JavaScript has advanced as well, but more in terms of implementation than in standards. Many browser manufacturers have been focusing on creating more efficient JavaScript engines that are faster and more efficient.
What's the benefit? Clearly improving the overall performance of JavaScript is a important, particularly for mobile devices.
Next Up
That covers the newest family members, some of the new things they can do, and why they're cool. In my next post I'll talk more about how these evolving technologies will affect projects and businesses.