HTML5 Decoded

Do you know exactly what HTML5 is, and the extent of its capabilities (and limitations)? Yin Shanyang, Principal of Swarm helps to clear the air about this popular and widely-mentioned web concept.

The term ‘HTML5’ made it into mainstream media soon after then-CEO of Apple Inc., Steve Jobs issued his open letter titled “Thoughts on Flash”. The letter sparked off serious discourse over the subject matter, but what I have found to be most interesting is the many interpretations of HTML5, and how a single name can encompass multiple meanings.

HTML5 Is an Icon

Technically speaking, HTML5 is a language for structuring and presenting content on the Web. Its traditional function had simply been to transport content across the Internet in a machine-readable form. As it progressed, HTML5 has come to include a few features through application programming interfaces (APIs) to evolve the language to be suitable for application development. These include APIs like drag and drop, offline storage, media playback and more.

However, regarding HTML5 as an icon involves essentially a list of features added to this traditional markup language to make it more suitable for application development. It speaks nothing of how it should look nor how it will work.

hTML5 Is an Index

This is the most common definition of HTML5, with it being an index. Here we speak of HTML5 not as a singular technology, but as a collection of technologies, which include cascading stylesheets (CSS) for visual styling and JavaScript (JS) for logical operations and handling interactions.

Over the years, these technologies have evolved alongside HTML. JavaScript engines have become faster, which allows more complex and sophisticated operations to run within the browser – without compromising the user experience. And on the visual front, additions like transitions and animations allow for more dynamic manipulation of the interface.

This combination of technological advancements and feature additions has thus made web technologies (as they are otherwise known) to be a viable development platform for applications. Thus when cited as an index, HTML5 refers to web technologies in its most modern state, as a reliable and capable toolkit.

HTML5 Is a Symbol

On occasion, we would speak of HTML5 as a symbol – most often as an undertone. Subtle as it is, I actually think that this is the most important aspect of HTML5, the paradigm shift that lets applications run completely within the browser.

The browser has been traditionally used as a document viewer that happened to have links and some interactivity layered upon the content. However, the most common activity within the browser had been to consume and not so much to create content.

Then came the rise of web applications – though their logic mostly resides in the server-end. For example, Facebook.com exists as a compiled executable file that runs on Facebook’s servers. All operational logic lives on the server while what you see in your browser is a rendered representation. The browser does little of the heavy lifting in this process. In contrast, Facebook for the iPhone lives as a standalone application that only communicates to Facebook’s servers

for data requests. The application is only dependent on the servers for data, but not for logical operations.

And this is where the paradigm shift exists. Web applications are behaving more like standalone applications (i.e. Facebook for the mobile), compared to the traditional server- driven web applications (i.e. Facebook.com).

The astute would notice that this technically does not require HTML5 (both the icon and the index), but conditions are now conducive which makes the endeavour viable. This change in perspective is most clearly reflected in the developer community through the state of frameworks currently available.

Getting To Know HTML5

The path to practical understanding of HTML5 closely mirrors the process of reading HTML5 as a sign. As subsequent layers require a deeper understanding of HTML5, half the battle is won by knowing where to start.

HTML5 lives in a continuum under the family banner of HTML. As pointed out in reading HTML5 as an icon, the name represents a list of additional features. The best way to understand what makes these additions so apt for applications is to compare the features against its predecessors. On the other hand, to understand what the collection of technologies that HTML5 represents as an index, the curated gallery of Chrome Experiments will serve well as an inspirational showcase.

Lastly, to see what HTML5 symbolises, simply take a look at what passes for a web application these days: Flow, 280Slides and Pandora. Alternatively, for the technically inclined, taking a deeper look at current development frameworks such as Backbone. js and Ext.js would also reveal the implications of the ways that web applications exist today.

To sum things up, HTML5 exists as a spectrum. It represents different meanings depending on the context you use it in. Optimising existing web content for mobile devices would involve looking at HTML5 as both an icon and an index while developing a stand-alone cross-platform web application probably looks at HTML5 both as an index and a symbol. And simply being able to recognise this would give you a better understanding of this broad (and slippery) term.

Yin Shanyang spoke on the above topic at the Mobile HTML 5, Beyond List Views seminar on 5 Oct 2011. The seminar was organised by the SCS Mobile and Wireless Chapter.