Back

HTML5 Fundamentals

Nov 19
andrew-trice Posted by Andrew Trice in html5

Most of our clients have heard the latest industry buzz word by now: “HTML5”. For some, this word alone invokes excitement and the concept of a “standards-based” rich experience on the web. With others, this term invokes fear and hatred: “Is it going to kill Flash or Silverlight?”. A single buzzword that can invoke such passion shouldn’t be taken lightly, however you should also take the time to understand exactly what it is.

HTML5 is a tool for implementing user interfaces via the internet. Nothing more, nothing less. The confusing aspect arises when you stop to consider what is classified as “HTML5”…

In the truest definition, HTML5 refers to the latest evolution of the HTML markup language. HTML is text-based markup language that is used to format information so that it can be presented via web browsers. HTML version 5 is the latest iteration of this language, which includes new markup (or, tags) for describing audio and video media, enabling programatic drawing elements, or semantic markup for self describing documents, just to name a few.

However, the markup by itself doesn’t encompass everything that people refer to when they speak of “HTML5” as a technology. In common discussion, the term “HTML5” refers to much more — it is a blanket/catch-all term referring to the HTML version 5 language specification, new JavaScript APIs that are exposed by latest generation of web browsers, and the new CSS3 attributes for styling web pages.

The new JavaScript APIs (Application Programming Interfaces) enable a deeper level of capability within the browser, which enables you to create more robust and engaging applications. The new APIs involve programatic drawing methods, to be used with the new HTML5 Canvas element. This allows you to dynamically create visual assets on the fly, completely with JavaScript. The new APIs also include geolocation, offline status detection, rich drag and drop support (including interaction with the OS desktop), cross document scripting (for communication between separate web pages), browser based databases for local data cache and offline storage, multi-threading (web workers), and enhanced integration with the browser history, among others.

The CSS3 specification, or “Cascading Stylesheets Version 3” refers to the language that is used to format HTML-based content within the web browser. CSS3 includes new features such as web fonts, rounding of corners, drop shadows, RGBA and HSLA colors, and even animations and transitions. Another aspect of CSS3 is that it enables CSS media queries, which allow you to define CSS styles that specifically target devices or screen dimensions. With this, you can have a single HTML markup, with multiple CSS styles, and the usage of the style is determined by the device that consumes the HTML content. In short, it allows you to easily style content specifically for mobile or tablet devices in addition to the browser-based interface, all within a single code base.

Now that we’ve got a clear idea of what we are referring to when discussing HTML5 as a technology, let’s consider it’s strengths and weaknesses.

First, the strengths: HTML5 allows for rich experiences within web browsers, without the need of plug-in based technologies (Flash or Silverlight). The new APIs expose powerful new features that can be consumed within multiple browsers, and on multiple devices. Many phones and tablet devices that cannot run Flash or Silverlight are capable of displaying content developed for HTML5.

Now the downside: HTML5 is not standardized yet. Each browser has it’s own implementation, and supports a different set of features. In addition to this, each browser also supports different sets of codecs for audio and video media. Thus, if you are producing content that will target multiple devices, the experience on different devices may not be identical. Additionally, since codec support is different, you may need to provide audio or video content in a variety of formats.

HTML5 is not a perfect technology. It does not solve every problem, and is plagued by competing browser vendors fighting for their own standards and features. You will undoubtedly run into issues of conditional logic depending upon browser variants or available features. There are some problems that it solves exceptionally well, while others that it is not developed enough to support with any reliability or real-world feasibility. When compared to plugin-based technologies such as Flash or Silverlight, there are some scenarios where it is superior, and other cases where the player-based solutions are vastly superior.

The determination whether it is the right idea to use HTML5 depends on what you are trying to accomplish. Are you targeting mobile devices specifically? Does your application warrant the need for plug-in-based technologies? Do you have an experienced team that is adept with HTML, JavaScript and CSS?

The truth of the matter is that HTML5 is an emerging standard, and will be a new asset in your development arsenal. It’s not likely to “kill Flash”, and it shouldn’t invoke fear. It should be embraced, respected, and used as needed.

0 Comments

There are no comments yet. Be the first.

Add a comment