The misinformation surrounding HTML5 has reached new levels.

Last week, I saw a Linkedin discussion thread that referred to HTML5 as “a strategy.” Now, the discussion actually centered around the idea that mobile web apps are a better strategy than native apps for business. I completely agree with that statement.

However, HTML5 is not a strategy.

Here’s what’s happening: As HTML5 becomes more popular, the misinformation surrounding this new standard grows. It’s become a catch-all phrase for the mobile web, and its features and capabilities are widely misunderstood.

The problem: Everyone wants HTML5, but they’re not quite sure what it is.

Today, let’s clear up some of that confusion. I’ve compiled some of the most common misconceptions surrounding HTML5 today, and explained why they’re false. How many of these do you believe?

1. HTML5 makes web apps look native across all platforms

Perhaps the largest misconception centers around the idea that “HTML5 makes web apps look native on mobile devices.” I regularly see articles on high profile sites making this claim.

The only problem: It’s not true. HTML5 does provide some nice features for use in mobile web apps (like geolocation, offline access, local storage, and more) but it certainly doesn’t make one web app or site appear native across all mobile devices.

So, what IS responsible for that?

That’s largely driven by Cascading Style Sheets (CSS). CSS controls the look and feel of an application, and helps developers create web applications that appear native across all platforms.

Now, without getting too technical, creating web applications that appear native across all devices isn’t as easy as simply using CSS. The application must recognize the user’s device and use the appropriate styles. How? Here are two popular design methods:

Responsive Design: Responsive design uses a CSS3 feature known as “media queries” to understand the device’s width, height, resolution, and orientation. Using that information, it then selects the appropriate styles and/or style sheets for that screen size. In that way, the application automatically responds/adjusts to the device.

Adaptive Design: Adaptive design employs the use of multiple HTML/presentation layers. The application queries the device type, and displays a device-specific presentation layer. For instance, a web app accessed using a smartphone will display the smartphone layer. If accessed from a tablet, that same app displays the tablet layer.

Now, we use this approach in our web apps, and have some demos set up if you’d like to try it for yourself. If possible, try opening this application on different devices, and notice how it looks different on each. If you only have a PC, just click each button below. Each one opens the same application, but displays a different presentation layer.

2. HTML5 is one big thing

“Are your applications HTML5 compatible?”

“Do you build HTML5 web applications?”

“Do you support HTML5?”

These are all common questions, and all stem from a single misconception: Many believe that HTML5 is one big thing.

In reality, HTML5 is not one big piece of new technology. It’s a collection of new features that you can now use in your web applications.

So, saying that we now “build HTML5 applications”, or we now “support HTML5” are confusing statements. Yes, we build applications that employ HTML5 features. However, it doesn’t require that we scrap our old HTML code and use HTML5 code, or rebuild everything from scratch. HTML5 simply offers new features to use with your existing applications.

3. We need to convert our apps to HTML5

Another common concern surrounding HTML5: “What happens to all of our non-HTML5 web applications?” Are they worthless? Or, do you need to go through a painful HTML5 conversion process?

Not at all.

As I mentioned earlier, you can use HTML5 features in your existing apps. The only change you may want to (but don’t necessarily have to) make to your existing apps: Change the doctype in your HTML document to “!DOCTYPE html”. That’s it.

What does that change do for you? Let’s cover that in the next section…

4. HTML5 automatically delivers offline access (or other features)

So, what really happens when you change to an HTML5 doctype? Does it instantly give you access to all of HTML5’s features? Does it give you web apps that instantly use geolocation and work offline?

No.

That change simply tells the page to render in standards mode, which means they’ll interpret parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don’t support.

In other words, you can’t just flip an “HTML5 switch” and expect all the features to instantly appear. I use the offline access example because it’s the most frequently mentioned misconception. Many people believe that all HTML5 applications work offline. In reality, you must build that ability into your application.

5. HTML5 app = Mobile web app

The term “HTML5 app” has become a catch-all phrase for mobile web apps. Every day, I see articles touting the pros and cons of the “HTML5 vs. Native app” approach. The problem is…it doesn’t make a whole lot of sense.

Let me ask you a question: What is an “HTML5 app?” Is it a web app with the HTML5 doctype? Is it a web app that uses HTML5 features? We’ve already established that HTML5 isn’t one big thing. It doesn’t make web apps appear native across mobile platforms. It’s simply a collection of features. So, how do you define an “HTML5 app?”

For example, this web app uses the HTML5 Geolocation API, and looks native on any device. Is it an HTML5 app? It does use HTML5 features…but it also uses CSS3, jQuery, and Java and runs on a Tomcat server connected to a back-end MYSQL database.

While it does use HTML5 features, I could just as easily call it a “CSS3 app” or a “Java app”. After all, those are all aspects of the application as a whole. In my opinion, isn’t that application better described as a mobile web app?

Wrap up

While I’m sure there are plenty of other HTML5 myths, those are a few of the most common. Would you add anything to the list? I’d love to see your additions in the comments.