Top 10 Reasons to Use HTML5 Now

Unless you haven't been paying attention to the latest web development trends for the past few years, it's likely that you have heard about HTML5. As I speak to developers across the country I'm routinely asked why developers should use HTML5 and where is a good starting place to implement HTML5. Both are great questions that I'll answer in this article.

1. HTML5 is Relevant for Today's Web Development Industry

A common misconception that persists is the notion that HTML5 won't be available for several more years. Nothing could be farther from the truth -- HTML5 is now and has been for several years. In fact, HTML5 became a WC3 Candidate Recommendation in December 2012, which means that the language is on the cusp of becoming an official industry standard for web development. Even Internet Explorer (IE) 8 supports several HTML5 APIs such as localStorage that can be "tricked" into support new element styling.

HTML5 isn't a single entity, but it's a set of standards and APIs that major browsers are supporting to varying degrees. Google Chrome is probably the best at implementing HTML5's latest standards and APIs, but fears of cross-browser compatibility shouldn't stop you from starting to develop against the new APIs. There are a several large polyfill libraries that provide support for older browsers and dynamically load as needed. If you aren't sure what a target browser supports then you can visit several sites such as Haz.io to get a real-time list of supported functionality.

You can detect features with Modernizr, which is a JavaScript library that tests support for several new features that lets you dynamically load polyfill libraries as needed. Sites similar to Haz.io use the Modernizr library to perform feature detection. This tool provides you with an easy way to perform feature detection. It also runs a script that lets you style new HTML5 elements such as

and .

2. HTML5 Standards Make Support Easier

Web developers and designers have earned their stripes over the years by dealing with browser compatibility issues. IE receives much of the grief in this space, mostly because of problems related to IE 6 and 7. The latest versions of the major browsers are much more unified because HTML5 defines a set of standards that developers can expect to encounter.

Although companies would traditionally compete by implementing custom interfaces and features into their browsers, today they compete on factors that matter more to the end user, which includes capabilities such as performance, developer tools, and history management. This doesn't mean that each vendor is restricted from trying new features -- in fact, they still create these features and occasionally submit them for standardization.

For example, Apple implements meta tags to define touch icons for its iOS home screens and the ability to launch chromeless browsers as a web app. Microsoft has its own meta tags that define how a site will look and act when it's a pinned tile on the Windows 8 Start screen. Although these differences exist, they shouldn't raise the same sort of concern that we experienced in the past such as how the boxing model or elements actually work.

3. HTML5 Semantic Elements

I see new and old web developers asking where they should dive into HTML5 all the time. It's a great question to ask because HTML5 is so broad. HTML5's semantic tags provide the perfect place to start because it's easy and immediately improves the structure and readability of your web pages.

Several years ago Google engineers conducted a study analyzing the most commonly used Cascading Style Sheets (CSS) class names applied to elements. The results showed many common trends in which class names were being used to semantically identify elements. Semantics refers to structure and understandability. Based on the study's findings, the team recommended a battery of new HTML elements.

For example, one of the most commonly applied terms used in the CSS class names is 'header,' hence the new HTML5

tag. This tag should be used to semantically identify areas such as the page's header or the header of a list item or article. Where there are headers there are typically footers, so is another new HTML5 tag. Again, it should be applied to identify area footers.

Other common areas identified include

, , , and . Instead of using a to partition content in a traditional HTML web page, you should think about using one of the new HTML5 tags. Let's look at a typical blog or news article page. The page will typically have a standard page layout that includes the site's header, navigation, and footer. Listing 1 shows code that uses old school HTML markup to create a bare-bones website layout:

      My Cool Site           menu 1       

Listing 1: A basic HTML master site layout

Alternatively, Listing 2 shows the same structure that's updated with HTML5 elements:

     HTML5 Blog           Menu 1      Menu 2      Menu 3      Menu 4     

Listing 2: An HTML5 Semantic Sample Master Layout

Notice how the Listing 2 markup doesn't use a single

element? That's because HTML5 now includes elements to more properly identify how an element is being used. Also, notice the and elements in Listing 2. The element has been redefined from its deprecated HTML counterpart, and the elements inside the menu specify individual navigation elements. This is much nicer than a or element with an tag along with several CSS classes to provide the now obvious semantics. Figure 1 shows a rendered HTML5 blog layout.

Figure 1: A rendered HTML5 blog layout

As for the blog post, you can also update the HTML structure to better identify the content. Listing 3 shows you the HTML5 code to create a sample blog post.

This is a sample Title, Some May Be Longer

     February 13, 2013          ...          Tag1, tag2, tag3     

Listing 3: A Sample Blog Post Semantic Markup

Similar to the layout example, the Listing 3 blog article markup contains no

or tags. Listing 3 does contain

tags that identify paragraphs. First, let's look at the

tag. This tag identifies a body of written content. Our example is a blog post, but it could also be a newspaper article or research paper.

Inside the

tag is another tag in Listing 3. This demonstrates how the tag identifies header content, but it isn't limited to a single page instance. I love the way this and the tag can be used because there are always multiple places to apply them. A blog post page is a great example. Here you can semantically identify content as either the header or footer but not article content. This is perfect for search engines because now they can better differentiate between the article's title and its content, which leaves just the primary content to be ranked.

Inside the header in Listing 3, you will also find the new tag. This tag provides what I call a mechanical time meant for browser engines, screen readers, and search engine spiders to consume. This leaves you free to display the date time the way you want to without worrying about formatting.

As you can see, the updated markup in Listing 3 is much easier to read. This is important for several different reasons. First, the updated markup lets you read the structure more easily. More importantly, the browser can better understand the content, which helps with rendering and screen readers. Another benefit is improved search engine ranking.

Updating your markup to leverage the new semantic tags is a very easy place to start adopting an HTML5 approach to your web development practices. It doesn't involve understanding a radically new API and can be supported in older browsers if you use a library that provides a shim such as Modernizr.

4. Client-Side Storage with HTML5

In the past, developers couldn't store data in the user's browser that would persist across sessions. Instead, developers used cookies and built server-side infrastructure. A common example is to store and maintain a user's profile. Although you can still use that server-side profile, you can also store data locally in the browser that will persist across sessions. There are two ways to accomplish client-side storage with HTML5 by using localStorage and IndexDB. You can also leverage sessionStorage, but that will be purged when the user closes the browser. Safari still implements webSQL, which is a deprecated storage proposal that implements a client-side SQL Server.

localStorage typically gives the developer 5MB of string based hash table storage. I say typically because older mobile browsers such as Android offers smaller storage quantities, despite the fact that today's standard is 5MB. The localStorage API is very simple and provides you with getItem, setItem, clear, and removeItem methods. The clear method will flush all localStorage values for the domain from the browser, doesn't discriminate between keys, and every item is affected.

The setItem, getItem, and removeItem methods all take a key parameter, which is used to identify the data. setItem has a second parameter, a string that's stored. The following code on JSFiddle demonstrates how to use the localStorage API, see Listing 4:

var log = document.querySelector(".log");localStorage.setItem("html5", "HTML5 Rulz!");log.innerText = "Addedr" + log.innerText;log.innerText = localStorage.getItem("html5") + "r" + log.innerText;localStorage.removeItem("html5");log.innerText = "Removedr" + log.innerText;log.innerText = localStorage.getItem("html5") + "r" + log.innerText;

Listing 4: Example JavaScript to Interact with LocalStorage

Although you're limited to string values, you can store JavaScript objects or use the JSON.stringify method to create a string. Of course, remember to use the JSON.parse method to convert the JSON string back to a JavaScript object if you plan on using it in your application.

The Chrome developer tools provide a very organized and interactive way to view and manage the data that's stored in localStorage for a domain. You can clear individual items, change values, or clear everything. One thing developers need to consider when using localStorage is the need to clear old data to ensure they are debugging against the latest data -- this has bitten me more than I care to admit. Figure 2 shows the Chrome Local Storage viewer in the developer tools.

Figure 2: Chrome Local Storage viewer in the developer tools

IndexDB is a much larger and better structured client-side data store. Unlike webSQL, it's more like having a lite version of MongoDB running in the browser. Initially, an IndexDB database is 5MB but it can be expanded to 50MB with the user's permission. The API isn't as simple as localStorage, but it provides you with a richer query and data management experience.

Transactions, version management, error handling, cursors, and indexes are all included with IndexDB. Security is based on the same-origin principle, which means data is only accessible for the originating domain. This blocks third-party scripts (i.e. advertisers) from gathering private data. For more information on the same-origin principle, see "The JavaScript Same-Origin Policy."

5. Offline Capabilities

Once you have a plan in place to store data in the browser, then you can start thinking about making your web application work when a user is disconnected. As we transition farther and farther to a mobile society, it's more likely that we might want to use a web application when there's no 3G or 4G. The HTML5 application cache specification defines how the browser manages the offline scenario.

Application cache is actually composed of several different components, including a manifest file, events, and API methods that create updates. You can determine if an application is online by calling the navigator.onLine property. If it returns true, then you can run your application normally. If it returns false, then you should invoke application functionality to manage the offline scenario.

You can specify in the site's application cache manifest file what and how the browser manages resources for offline use. In the manifest file, you can also specify resources that are made available offline. You can also specify fall-back resources when offline. I often specify a default image to be used when disconnected from a product database and might not have a local instance available.

When a site has a valid application cache file available, the browser will download the specified resources in the background, which makes them available the next time the application is launched. This is important because these changes take place in the background to ensure the user is actually using a consistent version of the site when they don't have access to the latest resource versions until the browser is restarted. You can programatically watch the updateready event and prompt the user to swap the cache by calling the swapCache method.

A common question I hear from developers is how the application cache manage synchronizing data once application is back online. In short, the application cache doesn't manage synchronizing data -- that's your responsibility. Defining a generic synchronization API for every possible application would prove to be far too complicated, so you will need to write this plumbing for yourself. This is why you should periodically check the online status when your web application is offline.

6. Richer Experiences with CSS3

For two decades the web was a rather flat experience without the aid of plug-ins such as Flash and Sliverlight. Today that has changed because CSS3 has added so many new styling features. For example, the border-radius rule means that we no longer need to slice images and wrap content in a labyrinth of complicated

tags or even worse -- a table. We can also add gradients, shadows, and even transform and animate our sites with no JavaScript or images. Listing 5 shows CSS code that applies several new CSS3 formatting rules that creates rounded corners, text shadows, and a gradient. Figure 3 shows the rendered CSS3 .

Figure 3: Rendered CSS3

HTML elements can now also be transformed and animated, which means that you can contort elements like a clown with a bag of balloons. Because modern browsers support animations, you can apply these transformations with smooth animations over a specified period of time. You can make complicated animations by using keyframes in which you can specify style rule applications at various steps throughout a period of time.

7. Better Data Entry with HTML5

It really frustrates me when I need to enter data on a website and the proper keyboard isn't invoked or client-side validation isn't implemented. As a user, this lowers my overall experience with the site and lowers my impression of the company. A site registration or authentication should be as easy as possible. With that said, extrapolate this to a company's employees that need to enter data all day long.

Traditionally developers have created large JavasScript validation and input formatting libraries. There are several jQuery validation, watermark, and masked edit plug-ins that are available to a developer. As browsers implement new HTML5 input standards, the need for these libraries is virtually eliminated. Now you can simply add attributes to tags to indicate required fields, watermark text, data format enforcement, and more. Listing 6 shows an example form with various HTML5 attributes.

With the advent of on-screen keyboards, users typically won't have the same sort of keyboard experience that they are used to with a traditional PC. HTML5 has added several new attributes to drive on-screen keyboards, validation, and other data-entry experiences to make entering data better for the end user and easier for the developer to implement. Figure 4 shows a sample mobile app that demonstrates how HTML5 input types help the user experience.

Figure 4: Example of how HTML5 input types help user experience

You can confidently use these attributes because they gracefully degrade for older browsers. Combining new attributes with feature detection such as Modernizr lets you dynamically load polyfills for validation in these older browsers.

8. Native APIs Enrich Your Website

HTML5 adds so many new capabilities that we once could only dream of in the past. These capabilities include a large set of new APIs such as GeoLocation, Drag and Drop, FileSystem, and many others. Before HTML5, you would need to target a user's IP and hope you were accurate to identify a user's location. Today, all modern browsers support the GeoLocation API that with the user's permission, your application will reasonably know where they are located so you can provide a more targeted data experience.

Other APIs such as Drag and Drop, Fullscreen, Visibility, and Media Capture can be used to enhance the application experience, improve performance, and reduce a smartphone's battery drain. WebSockets and WebWorkers also add value to the asynchronous nature of modern web applications.

There several new APIs and new ones are being introduced all the time. Support for specific features can vary by browser, although Chrome tends to be the first to support new specifications. This is the nature of HTML5 -- a constant dynamic of growth and improvement that should never end.

9. Native Video and Audio Support

Two new HTML5 elements are the and elements, and they do exactly what you think, which is to stream multimedia content. Each of these tags work just like the tag where you specify a source, height, and width. The elements can be styled and dressed up to make a pretty slick looking multimedia player. You should be aware that each browser supports different media encoding formats so you will need to create a minimal set of files to stream accordingly. Also old browsers can't be made to support these tags in which you'll need to include a nested fallback to use an older media player plug-in.

You can find a very interactive HTML5 demonstration from CraftyMind, where you can blowup and rotate the video using and CSS3. If you think these elements are risky, then consider YouTube and many other high-traffic media streaming sites that have already converted to HTML5.

10. Cross-Platform Game Development

The formerly exclusive domain of Flash and Silverlight games are now a cross-platform reality with HTML5 and the element. Rovio, Disney and several other companies are producing HTML5 versions of their marquee games. Atari has an online arcade that has many of their classic game franchises represented in pure HTML5 versions. The reason why pure web gaming is possible is a combination of new HTML5 functionality such as the tag, vastly improved JavaScript engines, and the use of the GPU to push graphics.

Jump into HTML5 Web & Mobile Development

There's no real excuse for a modern web developer or designer to avoid implementing HTML5 today. Browsers broadly support new specifications for HTML5, CSS3, and have super fast JavaScript engines to drive rich experiences. Older browsers can gracefully degrade or have appropriate polyfills loaded to implement several new features without disrupting the application. Remember that you don't have to implement every single feature, but add the features and APIs that are most appropriate for your application. Next in this series, we'll provide you with a history of HTML5 in "The Past, Present, and Future of HTML5" to expand your knowledge about this exceptional language.