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.
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.
Listing 2: An HTML5 Semantic Sample Master Layout
Notice how the Listing 2 markup doesn't use a single <div> element? That's because HTML5 now includes elements to more properly identify how an element is being used. Also, notice the <menu> and <nav> elements in Listing 2. The <menu> element has been redefined from its deprecated HTML counterpart, and the <nav> elements inside the menu specify individual navigation elements. This is much nicer than a <div> or <span> element with an <a> tag along with several CSS classes to provide the now obvious semantics. Figure 1 shows 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.
<article class="blog-post"> <header>
This is a sample Title, Some May Be Longer
<time datetime="2013-02-13">February 13, 2013</time> </header> <p>...</p> <footer> <nav class="article-tag">Tag1,</nav> <nav class="article-tag">tag2,</nav> <nav class="article-tag">tag3</nav> </footer> </article>
Listing 3: A Sample Blog Post Semantic Markup
Similar to the layout example, the Listing 3 blog article markup contains no <div>or <span> tags. Listing 3 does contain <p> tags that identify paragraphs. First, let's look at the <article> 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 <article> tag is another <header> tag in Listing 3. This demonstrates how the <header> tag identifies header content, but it isn't limited to a single page instance. I love the way this and the <footer> 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.
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.
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.
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
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 <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. Figure 4 shows a sample mobile app that demonstrates how HTML5 input types help the user experience.
You can confidently use these attributes because they gracefully degrade for older browsers. Combining new <input> 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 <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