Sencha Inc. | HTML5 Apps

Blog

A HTML5 Primer for the Overwhelmed

May 23, 2010 | Michael Mullany

HTML5With 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)

We’re very excited at our initial HTML5 based development here at Ext.JS, and we’re excited to see new features as they are implemented and stabilized in the latest browsers.


The HTML5 Family

Our continuing coverage of the many technologies which make up what people refer to as “HTML5”, we call The HTML5 Family. See all our published posts here:

  1. A HTML5 Primer for the Overwhelmed « Currently reading
  2. Web Storage
  3. CSS3
  4. Web Workers

There are 25 responses. Add yours.

S. Sanches

5 years ago

Thanks for the update. It’s most clarifying!

Roland Rich

5 years ago

Came to this site via Google looking for answers on putting maps on my page and just wanted to say thanks for your help!

Cyril Gupta

5 years ago

Excellent article Michael.

basavaraj koti

5 years ago

Thanks for the HTML5 sum-up. Hope for more timely updates.

Ben

5 years ago

The only problem is that there are a whole host of old browsers out there that don’t support HTML5, so isn’t this just adding yet another layer of browser compatibility issues. There’s no point writing HTML5 rich apps if loads of your users can’t use them, and a whole bunch of them have no control over which browser they’re using anyway.

Randy Peterman

5 years ago

@Ben: Just because something is not downward compatible doesn’t mean you don’t have to take advantage of some of the changes.  For example: you can use local storage and web workers (or many of the features) where they apply, but then have something that gracefully moves onto the supported approach.  Just because IE didn’t have a native XMLHTTP object doesn’t mean we stopped using AJAX (on the contrary we looped through a sad number of possible implementations). 

By doing cool things on new browsers users will be more inclined to upgrade, which can only benefit the industry.

Alex S

5 years ago

Fascinating article!  Reinforces my commitment to Ext.  As @ben mentioned above, this does introduce a completely new set of challenges and knowing that the Ext team is focused on these issues and that they have a solid understanding of the HTML5 landscape leaves me feeling content in doing what I do best - building applications.

Piers Finlayson

5 years ago

As well as being a useful summary of the recent and ongoing specification activities I like the way you have identified that use of “HTML5” to mean a combination of the latest HTML, CSS and JS technologies to create a rich web experience.

Do you have a view on how mobile standards such as BONDI and JIL, and the ongoing WAC initiative, should be integrated with the “HTML 5 family” to form a single set of specifications for access to native device capabilities, including geolocation, camera, mics, contacts data, etc?

Bob Chesley

5 years ago

Excellent overview on HTML5 and related standards.  Now time to dig in…

Thorsten

5 years ago

localStorage kinda sucks right now, specially when it comes to Webkit based browsers. First off, recent versions of Chrome do not support the Application Cache Api (coming with future versions, though). Safari does not seem to load cross domain resources once Application Cache is activated, no matter how you configure the Network section in the manifest. This makes the API for this browser completely useless - imagine an App that uses the Cache but has a Twitter Client which obviously needs to load image data from the Twitter servers.  I hope it gets fixed in one of the next releases…

Michael Mullany

5 years ago

There are lots of rough edges in the implementations right now. But this should get a lot better

fhj

5 years ago

Please, please, please, pretty please with a cherry on top, do a primer for CSS3. smile

Guide to HTML 5 - SLUniverse Forums

5 years ago

[...] excellent guide to what HTML 5 is and is not, since the term is getting as misused as Web 2.0:  A HTML5 Primer for the Overwhelmed ? Ext JS Blog ? JavaScript Framework and RIA Platform   __________________ Can the military overcome their problems recruiting young people? Yes, by [...]

Bob

5 years ago

Great article.. Great overview and clarification

Joe

5 years ago

Excellent description and clarification.  Thanks

Joeri

4 years ago

I’m using localStorage as a state provider already, with fallback to userData for older IE versions. Not having a dozen cookies sent to the server on each request helps a lot.

Peter Spicer-Wensley

4 years ago

Thanks, Michael for an excellent and succinct article.
For those querying browser readiness check here:
http://html5readiness.com/
to see how your browser fares.
IE6 will break but it was already broken and you shouldn’t be using it - welcome to 2010.
My 20c worth.
PeterSW

Derek Tomes

4 years ago

Thanks for the very clear summary, it is much appreciated.

Jay Robinson

4 years ago

FHJ: “Please, please, please, pretty please with a cherry on top, do a primer for CSS3. smile

Done! Look for our blog post on CSS3 here: http://extjs.com/x/2t

b

4 years ago

I agree with Ben,

HTML5 and CSS3 are cool and will help us out in about 4 years once they are widely adopted, until then it just means more of a mess for designers and developers to support both as people transition.

Quite frankly I still don’t see dramatic differences in HTML5/CSS3 and what flash/Flex does today for application development, it levels the playing field and takes the stupid browsers out of the equation. I think I have spent too many hours trying to work around browser incompatibilities that I don’t care to do it again for the next wave, please, wake me up when its over.

p6ril

4 years ago

I don’t agree on calling that “HTML5 familly” and I believe it’s actually confusing. HTML and CSS are separate subjects and specifications. There is nothing stopping a developer from applying CSS3 styling on an HTML4 or XHTML document. The point about HTML and CSS is simply to decorelate the content from it’s presentation. Hence although this post is highly interesting for its content I think it’s misleading with regards to what HTML actually is. The “HTML5 familly” as you call it is the web next generation (including potentially CSS3 and SVG for instance as you mentioned it) not just HTML5 as defined by the W3C. Anyway I agree your approach has a good teaching potential in simplifying the mix of involved technologies. Thanks for your interesting post.

Herbert

4 years ago

Good html5 intro, i will know what to expect when i am reading and trying out html5 family technologies

Alan Languirand

4 years ago

Thanks for the great article. I’ve had friends talking about this, but didn’t quite know if I was getting it. There is plenty of good here, but like you say there’s also plenty of hype.

telecom books

4 years ago

Good overview about html5, can you suggest the best book to learn it.

Michial Thompson

3 years ago

I find it interesting that the HTML Standards have grown so vastly towards trying to make Web Application Development so much better.  YET they still haven’t addressed the most simple of development needs which would take Web Applications into a TRULY USEFUL arena.

After a decade of trying to make Web Apps the standard we still do not have basic entry format controls without relying on a bunch of Java CRAP in our code.  Why can’t they add a simple “FORMAT” property to the <input> tag that would allow programmers to control the format of the input?  I’m not asking for much, but as long as I am reliant on JAVA to enforce formatting controls I am less likely to move to HTML Apps for 90% of business needs.

It’s bad enough that Microsucks has dumped so much crap into the HTML stream for .Net Web Forms, but to be forced to add even more is getting old.  Bandwidth may be improving daily, but browser rendering is still dependant on the hardware.

Get real people do something USEFUL in HTML5

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.