HTML5 Primer

Reprint from Sencha Blog

With Google and Apple strongly supporting HTML5 as the solution for rich applications for the Internet, it’s become the buzzword of the month — particularly after Google I/O. Given its hot currency, though, it’s not surprising that the term is starting to become unhinged from reality. Already, we’re starting to see job postings requiring “HTML5 experience”, and people pointing to everything from simple Javascript animations to CSS3 effects as examples of HTML5. Just as “AJAX” and “Web 2.0” became handy (and widely mis-used) short-hand for “next generation” web development in the mid 2000’s, HTML5 is now becoming the next overloaded term.  And although there are many excellent resources out there describing details of HTML5, including the core specification itself, they are generally technical and many of them are out of synch with the current state of the specs. So, we thought a short primer on HTML5 might be in order.

HTML5 Core vs. The HTML5 Family

When non-technical folks say “HTML5”, (particularly when this is followed with “will replace Flash”), they mean (or at least I think they mean), the broad collection of next generation technologies that are now being implemented in Webkit, Opera and Firefox. Some of these (like CSS3) were never part of the HTML5 standards process, and some of these (like web workers) were originally part of the spec but spun out separately. We think the right way to refer to this collection is “the HTML5 Family”. The family members of HTML5 (like all families) are in very different stages of maturity and implementation. Some are fully implemented in latest revision browsers, some may never see the light of day, and some will become altered beyond recognition before they show up in mainstream browsers.

As mentioned before, the core W3C HTML5 spec is just one part of the collection of related technologies. We’d list the following specs as members of the HTML5 Family (more or less):

  • The HTML5 spec
  • Cascading Style Sheets Version 3 (CSS3)
  • Web Workers
  • Web Storage
  • Web SQL Database
  • Web Sockets
  • Geolocation
  • Microdata
  • Device API and File API

Some people would also include the latest iterations of SVG in the HTML5 Family list as well,  but since SVG is generally a complete (although spottily supported spec), we would not.

The core HTML5 Spec

The purpose of the core HTML5 spec is primarily to evolve HTML from the XML-centric approach of the early 2000’s that had poor traction among browser makers and developers. HTML5 substantially changes many aspects of the language, although most changes do not result in new features visible to most end-users. These “user-invisible” changes include a new content model, accessibility features and browsing contexts.  In many cases, it allows what is currently done with styling, Javascript or server workarounds to be done in HTML. For example, HTML5 adds semantic tags for many common content elements: one specific is a form field for email address entry. Another specific is new markup for menus and navigation sections. This results in cleaner, human readable HTML.  Today’s blizzard of <div> tags is replaced with meaningful markup like <nav> and <aside>.  For forms, HTML5 adds support for PUT and DELETE form actions, which will simplify server side processing.  It also provides native support for adding form elements dynamically, which currently has to be done in Javascript.

For users, the highest impact change in HTML5 is the addition of audio and video tags and a standard 2D bitmap drawing format (<canvas>). HTML5 audio and video tags allow playback without the use of plugins, and canvas allows rich 2D bitmapped graphics .

There are many other features in the HTML5 spec, including a drag and drop API, cross document messaging, persistent content caching directives and user-editable content.  Support for them is still being added to the latest browser revisions. Some parts may still end up being discarded before final implementation. For example, there is currently a discussion over whether the <progress> element (intended to show information such as file download progress) should even be included.

Finally, HTML5 removes many presentational markup elements that littered earlier HTML specs, like <center> and <font>. It also disallows direct table styling, instead, requiring the use of CSS. Frames are also officially eliminated.

CSS3

A lot of what people think is HTML5, is actually CSS3, which is itself a collection of sub-specifications. These are in various states of completion and browser implementation. For example, CSS Animations and CSS Transitions are sub-specs that provide rich dynamic 2D animations and effects for elements. CSS 3D and 2D Transformations provide animations for boxed content. The CSS3 spec family also includes standards for richer layout control, borders and backgrounds (the highly desired “rounded corners” ). It also includes more niche capabilities such as ruby (not the language, ruby with a small “r’ means visual hints for meaning or pronounciation often used in ideogram based languages), aural style sheets and scrolling marquees.

Web Workers

Web Workers allow an application to spawn tasks for the browser to work on in the background without freezing the execution of the main application. There are a few types of workers that can be created with slightly different behavior. The intent of web workers is to give application developers the ability to specify what tasks within the application are parallelizeable (in the small), so that the browser can better schedule work for the rapidly increasing core count of today’s (and tomorrow’s) multi-core processors.

Web Storage

Web Storage is one of the more exciting parts of the HTML5 Family. Web Storage allows a page to store string data in a key-value pair database, specific to that domain. There are two varieties of Web Storage, the first is sessionStorage, that persists data only for a single session (think of it as a more functional cookie storage mechanism). The second is localStorage which allows a domain to store data locally across browser sessions (and system reboots). When you add localStorage to the cache manifest from the main HTML5 spec, you have the ability to run an offline application. The Web Storage spec is itself separate from the “Web SQL Database“ spec which provides for a full SQL-addressable database that is accessible offline. Although varieties of this spec are in implementation by browser makers, the standardization process is blocking on the need for a second interoperable implementation that is not based on SQL-lite (which all the current versions are.)

Web Sockets

The Web Sockets protocol is in the first stage of the standards process and has also been submitted as an IETF draft because it is a networking protocol. It defines a non-http based asynchronous client/server protocol that can be used in place of the current AJAX methods for asynchonrous server communication. It uses an initial http: request to bootstrap the new protocol.

And all the others…

Geolocation is a very simple spec that provides a built-in geolocation object that scripts can query. It also provides methods for defining location cache freshness requirements. This is fairly uncontroversial and already in new browsers. File API allows single and multiple file uploads from the user desktop. It’s unclear exactly who will support this, but there doesn’t seem to be much confusion about what it’s supposed to do. Device API’s to allow web browser access to cameras, BlueTooth etc, is still an early work in progress. It hopes to define standardized access to native hardware and sensitive data from web applications: namely a camera API, and API’s for contact list, SMS history etc. on mobile devices. From Google I/O it appears that Google is going to ship something sooner rather than later that allows camera access from a Chrome web application, but there’s been no further details on this.

HTML5 Summed Up

It’s easy to get lost in the welter of standards enumerated above. But stepping back you should get the sense that the HTML5 Family authors are on a mission to make web applications as powerful as native applications when it comes to user interface richness, offline capability and hardware access. Since HTML5 family apps will be deployed on the web, they’ll have the added benefits that the web has always brought, which are:

  • A universal client that works cross platform
  • Easy searchability and indexing (including deep linking)
  • The ability to trivially include third party services and mashups
  • Zero hassle deployment and updating (it’s just on the web)
Advertisements

One Comment Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s