HTML 5 – The Next Generation of Front End Code

With the end of any further development of XHTML, HTML5 is the future of our industry when it comes to the front end coding of web sites. While support for most features is spotty at best in most current browsers, it will be the standard moving forward.

Even Microsoft, which has been criticized in the past for lack of standards support, has touted a desire for full HTML5 support, starting with the future release of Internet Explorer 9, which will feature a sizable amount of HTML5 support .

If there is any doubt about its adoption in the application or consumer market, take these recent headlines as examples:

Why are the industry leaders and large corporations forging the way and pushing for widespread HTML5 adoption? My personal opinion is the mobile market. With about ½ of all internet access based from mobile devices and all of the major smartphone developers supporting HTML5, we can see where this is heading and it’s time to get on board.

Pro’s of HTML5:

New HTML5 Features

HTML5 is packed with new features that allow us to extend our web development services beyond their current levels. Not the least among these new features is a beautifully simple Doctype and HTML declaration:

<!DOCTYPE html>
<html lang=”en”>

This is in stark contrast to the overly complicated current doctype for XHTML Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Highlights

Here are some HTML5 highlights for developers and users:

DOM (document object model this is already used for previous versions of HTML)
The canvas element (for immediate mode 2D drawing)
Timed media playback (for displaying captions, etc.)
Client-side storage database (Session Storage, Local Storage and Database Storage)
Document editing (editable content areas using local storage)
Native drag-and-drop
Cross-document messaging
Browser history management (window.history.back())
New form element features and built in browser validation (search, email, tel, number, required, placeholder, autofocus + placeholder=”Default Text in Search Field”)
Block level links

New Tags

Taking semantic markup to the next level, HTML5 has introduced semantic tags. Instead of using IDs and classes in your markup to provide structural elements (<div>) you can now use a tag instead (<header>). Although IDs and classes will still be needed and important, we will see fewer instances of them. Here are some additional samples of new HTML5 tags:

<article> – Defines parts of the content that are independent, such as blog posts, articles etc.
<embed> – Defines external interactive content or plug-ins
<figure> – Defines a group of media content, and their caption
<footer> – The counter-part to <header>, used for any footer section per context.
<header> – Used for headers per context. Note: not just for the header of a page, but also for each header part in section, article and similar.
<hgroup> – Used for grouping several headers, such as a main heading and a sub-heading.
<nav> – Defines the main navigation.
<video> – Used for natively including video in a web page – lots of interesting work is coming along here in terms of web browser support.

Mobile Friendly

Just as HTML5 is the future of markup for front-end web sites and applications, mobile is the future of electronic, web-based communication. And the very, very good news is that just about all of the smart phone platforms fully support HTML5 (Google Android, Apple OS4, Nokia, Palm WebOS, RIM’s new OS6, etc.) and encourage development of online applications and web sites that use it.

As an example, the iPhone OS is built to recognize HTML5 features and take advantage of them. For online forms, we can code an email field to use <input type=”email”>. For Apple OS4, bringing focus to a field with this type will open the keyboard catered to entering email addresses. In contrast, coding <input type=”number”> automatically opens the numbers keypad, which allows users to type numbers without needing to switch to the needed keypad.

Backwards Compatibility

There are limitations when it comes to the current support of HTML5, but with a little extra effort, most elements are backwards compatible and degrade gracefully. Using our form example from above, if <input type=”number”> was not supported by your browser, it would default back to <input type=”text”>, which is just a normal text field. Of course, not all elements are backwards compatible, so using most elements on web sites requires a few workarounds and extra thought to make them function properly for everyone.

Con’s of HTML5:

As with all new technologies or new techniques on the web, there will be growing pains when implementing them. The good news is that the web developer/designer world has gotten a little impatient with supporting the dinosaur browsers.

So, if a visitor comes to our web site with an IE6 browser, we’ll fall back on our semantic markup and let the visitor have full access to the information on our site. It may not look as pretty and they will not have the full user experience visitors with more modern browsers will have, but all of the information is still accessible. That’s fair, right?

I’m a recent convert and believer in this approach. Should you spend the extra time and money developing for the smallest percentage of users? After all, we are just talking about user experience. Those visitors will still be able to access the information they are looking for, which is the most important consideration.

The rule is simple: Make it accessible to everyone, make it perfect for those with modern browsers and leave it at that.

Notable Cons

Cross-Browser support is very weak for all elements of HTML5, but more and more features are getting supported with each browser release.

October 2009 was the official “last call” for elements related to the working draft of HTML5. However, there are a few rumors and rumblings out there saying that because HTML5 is not 100% final, things may change. Don’t count on too much change, though.

Summing Everything Up

If you want to see into the future of our industry, you only need to study what the major web service companies and browser manufacturers are focusing their development efforts on…

Large industry players (Google, Apple, Yahoo, Mobile Device Manufacturers, etc.) have the infrastructure to respond almost immediately to user demand and are constantly pushing, perfecting and developing the technologies we use on the web every day. They have also devoted a lot time and money into developing services and web sites that leverage HTML5 and, therefore, have a huge stake in its success.