Should you care about whether your site uses (or will use) HTML5? We’ll discuss some important concepts and capabilities of this web development (yet to be) standard.
Reasons
Part of creating and maintaining a web presence is to reach the widest audience of users in a target market. But not all browsers are created equal especially when it comes to mobile devices. With Apple’s “no Flash here” approach and Adobe’s recent decision to abandon support for Flash on mobile a site should be built in a way to take advantage of the technologies available to the widest amount of devices.
By all reports the number of mobile devices sold is steadily increasing. Not surprisingly, mobile devices now account for a growing portion of web traffic.
Using HTML5 starts to make a lot of sense since users won’t be restricted to certain devices. This also opens the door to develop web applications that run within the major browsers without the need for third party plugins.
Support
Obviously Apple is strongly supporting the case of HTML5. Companies such as Pandora and LinkedIn are already using HTML5 as the basis for their apps. YouTube has implemented an HTML5 based video player. And Adobe is becoming a major player as well.
All the major web browsers support new features in HTML5. Since not yet standard, support of every feature varies by browser. However apps built on HTML5 are not stuck with running on only one kind of mobile device.
Capabilities of HTML5
Many point out that the full power is really updates to HTML, JavaScript and CSS. For a really great resource that delves deeply go see HTML5 Rocks. But here’s a few standout features.
Offline and Storage
Within this category you’ll find some nice added objects with appropriate properties and functions to JavaScript like localStorage (to allow you to store data locally for retrieval on a later visit) or sessionStorage (to save data locally for retrieval page to page on this visit). There are also some nice database objects (yes database) as well an application cache (different from browser cache as you control what is overwritten).
Other nice additions are being able to access things like a native drag and drop (desktop to app and app to desktop) and a geolocation object to pinpoint the user’s location (think local shoppers).
On the HTML side some nice improvement comes in the form of better semantic tags (like <header> or <footer>) so that you know what it is being used for right away. Or new form element types (type=”email”, type=”date”) that validate the input automatically. And some of these are intended specifically for the mobile platform.
But some really great power comes in the graphics and multimedia arena. Native <audio> and <video> tags that will let you embed media without the need for a third party plugin (e.g. Flash or Quicktime) to play the media. Be careful with these tags though. At this writing, not all browsers will natively play all media formats so you’ll likely need duplicate versions of your media (e.g. .mp3 and .ogg). The good news is that if you supply multiple versions to the tag, the browser will play the first one it recognizes.
Other great additions in graphics in HTML and JavaScript give the developer improved capabilities in drawing (2D and 3D) and animations. The improvements in CSS make some styling now much easier with new selectors and selector attributes to do everything from controlling form input styling to text styling including text wrapping, columns, text stroke, text shadows, and text animation. And it’s certainly not just about text but the abilities are too numerous for this article.
Takeaway
HTML5 is already here and enjoying wide usage. Moving towards this set of standards will keep sites ahead of the curve and positioned to take advantage of a larger user audience. And a wider reach is the name of the game.
