![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Web standard development and marketing
It's a great time to be a web developer. After a long period of hibernation, the standards bodies and browser vendors have been extremely busy over the past few years, generating a torrent of exciting technology. Developers are greedily seizing on this work, producing demos and full-blown applications at a steady pace. Fed by this activity and further boosted by the growth of their standards-capable mobile browsers, companies like Google and Apple are using these new standards to market their products and services. The wider press is also seizing on this wave and pushing standards hype well beyond the normal circle of web developers and browser vendors.
This volume of discussion has obvious benefits, of course. People getting excited about web standards is a positive development for everyone in the industry. From that perspective, the persistent use of blanket terms, especially HTML5, as a sort of brand shorthand for "emerging web technology" is a useful shortcut. It allows nontechnical people to grasp—in a generalized way—the exciting work being done in the standards space right now.
Interestingly, even the W3C has gotten into the act, using HTML5 and its associated logo (see Figure 1) to publicize the "web platform."
Figure 1. The HTML5 logo
On the downside, the volume of the specification work being done, coupled with the fast-and-loose labeling has created a bit of confusion, even in the developer community, surrounding the specifications themselves. Unless you're paying close attention to the volume of work, there's a real chance you'll get lost in the acronym soup of standards being generated.
This article helps to clear up any confusion surrounding the ongoing standards work. It outlines the major standards efforts and provides a handy guide to the technologies themselves.
HTML5, "HTML5," and HTML: the living standard
The most important of the specifications is, without a doubt, the latest iteration of HTML. For better or worse, "HTML5" has become a catch-all phrase for all emerging technologies. JavaScript developer Peter Paul Koch succinctly described the phenomenon in a blog post from January 2010: "HTML5 is anything you want it to be as long as it's new and cool."
Although that sentence describes the sentiment of a lot of people and captures the essences of the HTML5 "brand" that has developed over the past couple of years, there is a need for people who build websites to move beyond blanket terms and dig down into the actual technical specifications that are driving the hype.
As a note, the Web Hypertext Application Technology Working Group (WHATWG)—the working group driving the current HTML standards effort—has moved away from what it calls the "snapshot standards development process," long practiced by the W3C. Although the group is working closely with the W3C to create the HTML5 snapshot specification, its own standards efforts are focused on simply progressing HTML as a "living standard."
Naming semantics aside, let's step through the technologies actually present in the HTML5 snapshot specification. For a full, deep dive into any of these documents, refer to the Resources section, which contains links to this and all other standards documents referenced in this article. For this specification, be thankful for the web developer-specific version recently released by the WHATWG; it removes several hundred pages of information destined for browser vendors, making for a much more easily digested document.
Technologies in the HTML5 snapshot specification
Before diving into the components, it's worth noting that the WHATWG isn't kidding when it refers to this as a living standard. It's a moving target. Some technologies, like the Canvas 2D API, have started in the core specification and have later been moved into their own documents.
Of all the new pieces of the specification, the elements being adopted most
rapidly are the new semantic elements, like
Header, Footer,
Section, and Aside.
Many were based on common usage patterns found during a web census
conducted by editor Ian Hickson. This is clearly seen in
Header and Footer,
which echo the common id="header" and
id="footer" patterns found across the web.
Others, like hgroup,
aside, and figure,
were logical additions and enhancements to the existing elements of HTML.
Although specific browser support for the new elements is limited (browsers don't do anything special with a header, for example), the use of the new semantic elements is becoming quite common. Developers are working through best practices and creating common patterns for utilizing the new elements. For example, although older versions of Windows® Internet Explorer® have some trouble with unknown elements, libraries like Modernizr or the HTML5Shiv snippet smooth the way for cross-browser use of the new elements.
To go along with the new semantic elements, a new outlining algorithm is in
place to generate more flexible document outlines. In addition to the
standard header elements
H1 through H6, HTML5
introduces several new sectional elements, such as
section, article,
aside, footer,
header, and nav.
These elements break the outline of the document into a new section.
Coupled with the familiar header elements and
the ability to add more than one H1 element on
a page, there are now much more powerful options for creating semantically
rich, structured documents.
Using a tool like the HTML5 outliner (h5o)
bookmarklet during development is helpful for getting a handle on the new
algorithm. The new options can take some getting used to, and seeing a
document broken out in outline form throughout the development cycle can
bring clarity to the issue.
Playing audio and video in the browser is such a common event on the web that it's easy to forget that, for most of the history of the web, there was no native method for doing so. Enter the new HTML5 audio and video elements.
From a specification perspective, the inclusion of browser-native APIs for
playing audio and video is straightforward and well-designed. Anyone
familiar with the way the replaced elements like
IMG work now will understand how to embed video
and audio. And the associated API is simple, as illustrated in Listing 1:
Listing 1. A simple video example
<-- the HTML -->
<figure>
<video src="_assets/video/sample.webm" controls autoplay
width="400"
height="300"
id="video-sample"
data-description="sample web video">
your browser does not support the video tag </video>
<legend>This is a nice, sample web video</legend>
</figure>
//the JavaScript
var video = document.getElementById("video-sample"),
toggle = document.getElementById("video-toggle");
toggle.onclick = function() {
if (video.paused) {
video.play();
toggle.className="playing"
} else {
video.pause();
toggle.className="paused"
}
};
|
Unfortunately, getting to the point where the above code works in all major browsers with a single video source is still a long way off. With browser vendors facing off on two sides of the code divide, it's far more complicated than it should be. Until we move away from Apple and Microsoft standing firmly behind the patent-encumbered h.264, versus Google, Opera, and Mozilla backing free, open, and royalty-free video formats like WebM, video on the web will remain more, rather than less, complicated than it was in the Adobe® Flash®-only era.
HTML5 provides several new form elements to
better reflect common input tasks. Formats like
Email and URL can
now be indicated to the browser in a meaningful way. Completely new form
inputs include range (for a slider),
date (for a date picker), and
color (for a color picker).
Unfortunately, as research by Peter Paul Koch shows, browser vendors other than Opera and Research in Motion have been slow in adopting these technologies. This is a shame.
Although elements like canvas are certainly flashy and "cool," a lot of websites make their money in forms. For them, better forms mean better sites. It would be a real benefit to see some of these enhancements in front of users.
Offline Web Applications defined an application cache manifest that allows a site or application developer to specify a set of files needed to run the application without a network connection. This specification is combined with the data-storage capabilities of the web storage specification to allow for some powerful offline capabilities.
HTML5 defined a new API to ease content editing. Although there are novel JavaScript implementations, a native API should help present a more consistent, effective user experience.
The new drag-and-drop API allows for drag-and-drop file uploads from the desktop to the web. A live example of this functionality can be seen in production with Google Gmail, in both Mozilla Firefox and Google Chrome.
One of the consistent usability issues of the Ajax era is the way Ajax-heavy applications break the standard history stack. Although there are script-based solutions and common schemes available now to handle dynamic state, the HTML5 history API is a welcome improvement over ad hoc solutions. HTML5 adds onto the previous ability to navigate the history by including a method to add entries to the browser history and respond properly when the user clicks the back button.
HTML5 defines a standardized method for marking up metadata in the body of
an HTML document. Microdata will be familiar to people who have worked
with microformats like hCard and hCalendar, with some important
differences. Most importantly, microdata moves the pertinent information
off of the classes previously hijacked by microformats and onto a new
itemprop attribute.
In addition, the standard adds other attributes that more precisely define the format of microdata and a method that allows for more straightforward programmatic access to microdata:
itemscopesets the scope of a microdata segment.itemtypeprovides a URL that defines the specific microdata format in use.document.getItems()provides access to top-level microdata items; the method returns aNodeListcontaining the items corresponding to an optionalitemTypeargument or all types, if no argument is provided.
Technologies lumped into HTML5 that are in separate specifications and working groups
Several technologies have graduated out of the HTML5 specification into their own documents. Others, always separate from the HTML effort, have been gathered under the "web platform" banner.
Probably the strangest technology to be roped into the HTML5 catch-all is Scalable Vector Graphics (SVG). SVG is a vector graphics grammar defined in XML. The SVG specification has been under development by the W3C since 1999, so including it as either "new" or part of HTML5 is a stretch.
Still, newfound excitement for SVG is justified, as there's now some real traction for the standard. Some level of support is now available in the latest versions of all the major browsers and an API for older Internet Explorer versions presented by libraries like Raphael.js.
One of the earliest stars of the HTML5 era, the Canvas element and associated API, started life as an Apple extension to HTML. As mentioned earlier, it started the standards process as part of the main HTML5 specification. It now lives at the W3C in a separate document.
The Canvas 2D context provides a scriptable interface for drawing two-dimensional images and bitmaps in the browser. It's already been leveraged for everything from charting libraries to game engines, a popular system for delivering custom fonts, and even a port of the Processing programming language into JavaScript. Thankfully for those looking to explore Canvas now, there's a level of support for legacy versions of Internet Explorer provided by the ExplorerCanvas library.
The Geolocation API is a standard interface for retrieving the geographical
location of a device. It provides a
window.geolocation object that in turn provides
methods that figure out a device's location through the use of location
information servers. Location information is pulled from a variety of
sources, including IP address, device GPS, Wi-Fi and Bluetooth MAC
address, radio-frequency ID (RFID), and Wi-Fi connection location.
The Web Storage specification defines an API for persistent data storage of key-value pairs in web browsers. This specification is similar to, but greatly improves upon, the functionality currently offered by cookies.
Storage takes two forms: sessionStorage and
localStorage. Each provides similar methods for
managing items (setItem(),
removeItem(), and
getItem()) and for clearing the entire storage
(clear()). Session storage is designed to hold
information for just the current browsing session. Local storage is meant
for longer-term storage of site preferences or other user data. There's
also a storage event that can be listened to, for purposes of monitoring
and reacting to storage activity.
For those interested in experiencing this functionality now, the Persist.js library offers a solid, cross-browser solution for using web storage or web storage equivalents in all major browsers.
Two other specifications go hand in hand with Web Storage:
- IndexedDB is a related but green specification that offers even greater opportunities for long-term data storage in the browser, including the ability to query the database and, importantly, the ability to store complex objects, not just simple strings.
- Web Workers is an incredibly powerful specification that defines an API that allows application developers to spawn background "workers" running scripts in parallel to the JavaScript on their main page. This functionality allows developers to offload lengthy processing tasks to background processes, freeing up the browser for continued interactions in the main context.
This specification provides an API for working with files in web
applications. Coupled with several other emerging and established
technologies, like XMLHttpRequest, drag and
drop, and Web Workers, the File API will allow for much more powerful
interactions between the web and the desktop than are available today.
Instead of a simple file upload input element passing the file to a web
server for processing or a complicated Flash interface, the File API will
allow direct access to file data to the browser.
The WebSocket API is designed to allow for bidirectional, simultaneous communications between a web browser and web server over a single TCP socket. WebSocket should actually be far along in the implementation game, with support in the latest versions of Firefox, Opera, Chrome, and Apple Safari, but a security vulnerability discovered means that support is now disabled by default in Firefox and Opera.
This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events. This specification reverses the current pattern of polling a server at regular intervals for updates, saving countless unnecessary requests and the associated processor time and bandwidth.
The Web-based Graphics Library (WebGL) enhances JavaScript with the ability
to create interactive, three-dimensional graphics in the browser. WebGL is
a context of the canvas HTML element. The
specification went to Version 1.0 on 3 March 2011 and is managed by the
nonprofit Khronos Group.
The XMLHttpRequest Level 2 specification
enhances the core XMLHttpRequest object with
new features. The most interesting of these is probably Cross-Origin
Resource Sharing, which is a safe way to get around the same-origin
security policy that prevents XMLHttpRequest
from interacting with a third-party server. Currently,
XMLHttpRequest can only communicate with the
same server on the same protocol.
With the prevalence of JSON and JSONP, cross-origin sharing may not have the same urgency it once did, but it will still open many possibilities in site and mash-up architecture that were previously blocked by the same-origin policy.
For the latest version of CSS, the working group decided to move away from a single, monolithic specification and divided the work into several separate documents called modules. Each module adds a new capability or extends a features defined in CSS, Version 2 (CSS2).
Several modules are mature, having been in development for 5 to 10 (or more) years. These are either proposed recommendations or candidate recommendations in the W3C's completeness hierarchy. That means they're basically done. Let's take a look at some of the more interesting and important modules.
CSS doesn't work without selectors. Selectors are used to target elements in an HTML document in order to style them.
This module contains the existing selectors from CSS, Version 1 (CSS1) and
CSS2, and extends them with new features. The additions focus primarily on
a group of structural pseudo-classes like
E:empty, which matches an empty element, and
E::nth-child(n), which matches a specific index
n child of an element. Other new selectors
include a negation psuedo-class E:not(s), which
negates a simple selector, and the UI element
states pseudo-classes like E:enabled and
E:disabled, which match elements that are
enabled or disabled.
Users of popular JavaScript libraries like jQuery, Dojo, and YUI will be familiar with the new CSS, Version 3 (CSS3) selectors, as they have been included in the libraries' CSS selector engines for some time now.
Color specifies the color-related aspects of CSS, including transparency and notations for color values. The new color values include Red Green Blue + an Alpha channel (RGBA) and Hue, Saturation, Lightness + an Alpha channel (HSLA).
Backgrounds and Borders defines the background properties, such as
background-color and
background-image, and defines the style of
borders. New functionality in this module includes the ability to stretch
a background image, images for borders, box shadows, and, in one of the
most requested features in the history of the web, the ability to specify
rounded corners on a box.
Multi-column layout allows developers to flow content into flexibly defined columns.
Media Queries is an enhancement of the @media
rules of CSS and the media attribute in HTML,
which adds parameters such as display size, color depth, and aspect ratio.
This module allows developers to more specifically tailor content to
different sizes and capabilities of devices within a class.
Media Queries play a strong role in Ethan Marcotte's Responsive Web Design, the subject of a popular A List Apart article and upcoming book.
New and in-development modules
There are exciting, practical, and eminently useful pieces of the mature modules, but much of the most exciting work being done in the CSS space is in a series of (relatively) newly proposed modules. Some of the most noteworthy examples follow.
Fonts Level 3 is an extension of the original and familiar font properties
available from the dawn of CSS. Level 3 includes the popular
@font-face rule, which allows for much greater
control of type on the web by granting the ability to directly embed
custom fonts into the document using CSS rules.
CSS 2D Transforms Module Level 3
The 2D Transformations module introduces a new property that allows for the rotation, translation, scaling, and other transformations to a box.
CSS 3D Transforms Module Level 3
Developed in conjunction with SVG, the 3D Transforms module extends the 2D Transforms module with a perspective transformation.
CSS Animations Module Level 3 and CSS Transitions Module Level 3
The Animations module allows the assignment of animations to elements,
specifying the properties to animate, the animation timing, and the units
to change during the animation. The Transitions module defines a property
to animate the transitions between pseudo-classes. A common example of a
transition is when an element enters or leaves the
:hover state.
Figure 2. I've seen the future
That ends our tour of the current state of the web standards world. It really is an exciting time, especially because so many of these technologies are rapidly becoming available to work with today as demos or even production code. With developers busy documenting the quirks of these new technologies and creating libraries to fill in support for legacy browsers, opportunities abound to experience these new technologies first hand. That first-hand experience is unquestionably the best way to experience the future of the web. So, if you're interested in seeing where we're going, now is the time to dive in and see what all the fuss is about.
Learn
-
HTML5 logo: Read about the web
platform, and download the HTML5 logo.
- "HTML5 means whatever you want it to mean" (QuirksBlog, January
2010): Peter-Paul Koch discusses the confusion about what the HTML5 spec
actually is.
- "HTML is the new
HTML5" (The WHATWG Blog, January 2011): This blog entry discusses
the new development model for "HTML5," where the technology is not
versioned and, instead, there is a living document that defines the
technology as it evolves.
- "HTML5 specification for web developers" (WHATWG, February 2011):
The focus of this specification is readability and ease of access. Unlike
the full HTML specification, this "web developer edition" removes
information that only browser vendors need know.
- "The new input types" (QuirksBlog, March 2011): Read the new input
type compatibility tables.
- "HTML Canvas 2D Context"
(W3C, February 2011): Learn more about the 2D Context for the HTML
canvaselement. -
cufón: Learn
about custom fonts served with cufón.
- "Web Storage" (W3C,
April 2011): Learn more about this API for persistent data storage of
key-value pair data in web clients.
- "Web
Workers" (Apple Computer, Inc., Mozilla Foundation, and Opera
Software ASA, April 2011): Read about this API that allows web application
authors to spawn background workers running scripts in parallel to their
main page. This allows for thread-like operation with message-passing as
the coordination mechanism.
- "File API" (W3C, October 2010): Learn more about this API for
representing file objects in web applications, as well as programmatically
selecting them and accessing their data..
- "The WebSocket API"
(W3C, April 2011): Learn more about this API that enables Web pages to use
the WebSocket protocol for two-way communication with a remote host.
- "Experiment comparing Upgrade and CONNECT handshakes" (IETF,
November 2010): Read about the security issue causing limited support for
WebSockets. Chromium
Code Reviews provides even more detail about the security issue.
- "Server-Sent Events"
(W3C, April 2011): Learn more about this API for opening an HTTP
connection for receiving push notifications from a server in the form of
DOM events.
- "WebGL Specification" (Khronos Group, February 2011): This
specification describes an additional rendering context and support
objects for the HTML 5 canvas element [CANVAS]. This context allows
rendering using an API that conforms closely to the OpenGL ES 2.0 API.
- "
XMLHttpRequestLevel 2" (W3C, March 2011): The XMLHttpRequest Level 2 specification enhances theXMLHttpRequestobject with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving. - "Selectors Level 3"
(W3C, December 2009): Learn more about the selectors that already exist in
CSS1 and CSS2, and new selectors for CSS3 and other languages that may
need them.
- "CSS Backgrounds and
Borders Module Level 3" (W3C, February 2011): Read about the
features of CSS level 3 relating to borders and backgrounds.
- "CSS Multi-column Layout
Module" (W3C, April 2011): This specification describes
multi-column layouts in CSS, a style sheet language for the web. Using
functionality described in the specification, content can be flowed into
multiple columns with a gap and a rule between them.
- "Media Queries"
(W3C, July 2010): Learn how media queries extend the functionality of
media types by allowing more precise labeling of style sheets.
- "Responsive Web Design" (A List Apart, May 2010):
Designers have coveted print for its precision layouts, lamenting the
varying user contexts on the web that compromise their designs. Ethan
Marcotte advocates we shift our design thinking to appropriate these
constraints: using fluid grids, flexible images, and media queries, he
shows us how to embrace the “ebb and flow of things” with responsive web
design.
- "CSS Color Module Level 3"
(W3C, October 2010): This specification describes color values and
properties for foreground color and group opacity. These include
properties and values from CSS level 2 and new values.
- "CSS Fonts Module Level 3"
(W3C, March 2011): This CSS3 module describes how font properties are
specified and how font resources are loaded dynamically.
- "CSS 2D Transforms
Module Level 3" (W3C, December 2009): Understand how CSS 2D
Transforms allows elements rendered by CSS to be transformed in
two-dimensional space. .
- "CSS 3D Transforms
Module Level 3" (W3C, March 2009): Learn about how CSS 3D
Transforms extends CSS Transforms to allow elements rendered by CSS to be
transformed in three-dimensional space.
- "CSS Animations Module
Level 3" (W3C, March 2009): Understand how CSS Animations allow an
author to modify CSS property values over time.
- "CSS Transitions Module
Level 3" (W3C, December 2009): Learn how CSS Transitions allows
property changes in CSS values to occur smoothly over a specified
duration.
- "Geolocation API
Specification" (W3C, September 2010): This specification defines
an API that provides scripted access to geographical location information
associated with the hosting device.
-
HTML5 Cross Browser Polyfills: Learn about the libraries and
other code that will help you work with new standards right now
- "Session history and navigation" (WHATWG, April 2011): Learn about
the new History API.
-
WHATWG on Twitter: Follow the
WHATWG on Twitter.
-
W3C on Twitter: Follow the W3C on
Twitter.
-
Rob Larsen on Twitter: Follow
the author, Rob Larsen, on Twitter.
-
developerWorks on
Twitter: Follow developerWorks on Twitter.
- The Web development zone
specializes in articles covering various Web-based solutions.
- Stay current with developerWorks' technical events and webcasts.
-
developerWorks on-demand demos: Watch demos ranging from product
installation and setup for beginners to advanced functionality for
experienced developers.
Get products and technologies
-
Processing.js: Download
Processing.js, the sister project of the popular Processing visual
programming language, designed for the web.
-
Explorer Canvas:
Add Canvas support for Internet Explorer with Explorer Canvis.
-
PersistJS:
Download PersistJS, a client-side JavaScript persistent storage library.
-
Modernizr: Learn more about and
download Modernizr. Modernizr adds classes to the HTML element which allow
you to target specific browser functionality in your stylesheet.
-
HTML5Shiv: Download the
HTML5Shiv.
-
HTML5 outliner (h5o): Download
the HTML5 outliner bookmarklet. The current HTML5 draft defines quite a
precise algorithm, for producing an outline for HTML documents.
-
Raphael.js: Download Raphaël, a
small JavaScript library that should simplify your work with vector
graphics on the web.
Discuss
- "Scalable Vector Graphics"
(W3C, June 2010): This specification defines the features and syntax for
Scalable Vector Graphics (SVG), a modularized language for describing
two-dimensional vector and mixed vector/raster graphics in XML.
- Create your developerWorks profile today and setup a watchlist on HTML. Get connected and stay connected with
developerWorks community.
- Find other developerWorks members interested in Web development.
-
Join one of our developerWorks groups focused on Web topics.
Share what you know.
- Roland Barcia talks about Web 2.0 and middleware in his blog.
- Follow developerWorks' members' shared bookmarks on Web topics.
- Web 2.0 Apps forum: Get answers quickly. Visit the Web 2.0 Apps
forum.
- Ajax forum: Get answers quickly. Visit the Ajax forum.
Rob Larsen has more than 11 years of experience building and designing websites and web applications. Currently, he's an interface architect at Isobar, working with HTML5, CSS3, and other emerging technologies for some of the world's largest brands. Rob writes about the web and web technologies at his blog, HTML + CSS + JavaScript.
Table of contents
- Web standard development and marketing
- HTML5, "HTML5," and HTML: the living standard
- Technologies in the HTML5 snapshot specification
- Technologies lumped into HTML5 that are in separate specifications and working groups
- The modular approach of CSS3
- New and in-development modules
- See the future
- Resources
- About the author
- Comments
