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
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