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.
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 <header> 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 <footer> is another new HTML5 tag. Again, it should be applied to identify area footers.
Other common areas identified include<nav>, <article>, <section>, and <datatime>. Instead of using a <div> 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.
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.
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
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 <input> tags to indicate required fields, watermark text, data format enforcement, and more. Listing 6 shows an example form with various HTML5 <input> 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 <input> 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.
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 <audio> and <video> elements, and they do exactly what you think, which is to stream multimedia content. Each of these tags work just like the <img> 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 <canvas> 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
Jump into HTML5 Web & Mobile Development