Over the last couple of years, HTML5 has dominated the tech headlines. Set to become the new standard in 2014, this buzz will only grow louder in the months and weeks leading up to that time. The only problem: HTML5 is still surrounded with misinformation.

Everyone wants HTML5, but outside the developer world, few actually know what it is. Some view it as a brand new tech trend. Others think they’ll need to convert their current applications to HTML5. Still others equate HTML5 with mobile web apps. In reality, none of that is accurate.

Today, let’s clear up some of the confusion. In this article, I’ll walk you through a high-level overview of HTML5 and briefly explain some of its most important features. Hopefully, this provides you a clearer picture of the new HTML standard, and helps you better understand how it can help your company. Sound good? Let’s get started:

What is HTML5?

Since the time HTML4 was released back in 1997, the internet has changed significantly. The fact is, HTML4 cannot adequately serve the needs of the modern web. It was built in a different era. It was built for a different internet.

Over the years, developers and web designers have found ways to bypass HTML4’s limitations, often resorting to messy workarounds and third-party plugins. But, as the web continues to change, it’s become clear that a modern solution is needed.

That’s where HTML5 comes in. Simply put, it’s the next iteration of HTML. It’s a collection of new HTML features and tags that you can now use in your web applications. It was designed to fix many of the flaws found in HTML4, and bring modern capabilities to web development.

How does HTML5 change web app development?

So, what are these new features? How will HTML5 change the web? HTML5 ushers in a number of new changes, from additional elements to new features and APIs. Let’s start out with the new elements, and quickly explain why they’re important.

New semantic elements
The “div” tag is the most commonly used (and abused) element in HTML. It’s used to define a section or a division in an HTML document, but has turned into something of a “catch-all” tag. After all, nearly anything can be defined as a “section or a division” in HTML. As a result, “div” tags are used for nearly anything.

Why is this bad? Well, imagine maintaining an HTML file that’s filled with “div” tags. Finding a specific section or area of that page is rather complicated without a more descriptive naming convention.

HTML5 solves the “div overload” problem with a handful of new semantic elements that help developers create cleaner and easily maintainable HTML. This article offers more information on the topic, but here’s a quick rundown and explanation of some of the most important new HTML5 elements:

• header – Houses all of the introductory elements on a page, such as navigation, menu bar, logos, etc…
• main – Provides a container for the main content of the page
• section – Defines sections in a document, such as chapters, headers, footers, etc…
• nav – Defines sections of the page that contain navigation elements.
• article – Used to define external content like a forum post, outside article, blog entry, etc…
• footer – Defines the footer element in a page.
• aside – Defines parts of a page that are not the primary focus, yet still related.
• address – Used for representing an address

In the past, each of those sections would most likely sit in side of a “div” tag. With HTML5, the overall organization of a web page will be much cleaner.

New form elements
HTML5 brings some pretty exciting new features to forms. Capabilities that previously required Javascript are now possible in HTML! To get a better understanding of what’s included, this article explains the new HTML5 input types and attributes.

New features
HTML5 provides some great new features and APIs which help developers build the most powerful web applications to date. While not an extensive list, here are a few of the most important new features offered in HTML5:

• Canvas: The HTML5 canvas lets web apps render dynamic bitmaps, such as graphs, games, or other visual images on the fly–without the need for plugins. From a business perspective, this helps you create plugin-free graphs and charts which work across all browsers and devices.
• Video & audio: Lets developers add multi-media elements to their page without the use of plugins. For example, because there has never been a standard for showing videos on a web page, videos previously required the use of third-party plugins like Flash or Silverlight. HTML5 offers a standard way to add video to a web page or app using the “video” element.
• Offline applications: HTML5 provides an API that enables offline web applications, which are particularly useful when creating mobile web apps. For instance, an offline mobile web app could let employees access essential data while on the road, even if they lose their internet connection.
• Local storage: In the past, native applications held an advantage over web applications because they offered persistent local storage–a layer for storing and retrieving application-specific data. While browser cookies were designed for this purpose, they never offered enough storage space to do anything useful. With HTML5, that’s changing. Web apps can now store data locally on the browser!
• Web Workers: HTML5 provides a standard way to run Javascript in the background, which can do complex tasks or make network calls while the web page responds to the user. This is important because it lets developers create far more powerful web applications. For instance, in the past, a web page might stall while waiting for a script to run. Using web workers, that page will operate just fine while complex scripts run in the background.

Can you use HTML5 now?

HTML5 doesn’t become the official standard until 2014, but you can start using it today. In fact, if you’re an m-Power user…you already use HTML5. We’ve integrated a number of HTML5 features into m-Power already, and plan on even more in 2014.

Which browsers support HTML5? Modern browsers like Chrome, Firefox, Opera, and IE10, currently support most every HTML5 feature. Older browsers like Internet Explorer 7, 8, or 9, offer limited-to-no support. For a full list of browser support for various HTML5 features, check out this page. If you’re still using one of those older browsers, I’d highly recommend upgrading if you hope to take full advantage of modern web capabilities.

What do you need to do?

So, how can you use all of those great features in your web applications? Do you need to convert your old applications to HTML5? Do you need to replace your current applications?

No and no.

The only thing you should really do: Change the doctype in your applications. In the past, HTML offered multiple doctypes–each one long and confusing. HTML5 replaces all of those doctypes with this:

Now, changing the doctype doesn’t automatically give you all of the great HTML5 features listed above. You still must add those manually.

So, what does changing the doctype do for your web applications? It ensures that your web applications validate as HTML5, and helps your HTML5 web applications behave (relatively) consistent across browsers. For example, while some browsers support HTML5 features even without the HTML5 doctype, not every browser will. Updating the doctype minimizes the cross-browser headaches associated with a move towards HTML5.

Wrap up

I hope this overview gives you a clearer view of HTML5, along with its benefits. If you have any questions about this new HTML standard, I’d love to hear them in the comments.