A Simple Explanation of HTML5

image for 'A Simple Explanation of HTML5' post

HTML5 is big news right now. Web developers have been developing sites with it for the past few years, but awareness among the business community and the general public is really just starting up.

This is great! HTML5 is a major step forward in web development. Plus, HTML5 highlights some excellent coding standards that have been around for years, but aren’t as widely practiced as they should be.

As awesome as this is, I’ve had a few conversations with non-developers who think HTML5 is a magic bullet. Most talk about it as something that they should be doing without fully understanding what it actually is.

While some web developers may be frustrated by the misunderstanding, part of their job is to explain to clients and employers what’s good and bad about new technologies, and without a lot of tech terms. So I’m going to take a stab at providing a simple HTML5 explanation.

And for the record: I think we should be using HTML5 when creating sites, but only in a way that helps us carry through our content strategy.

Here are the topics for this article:

What Is HTML5 Exactly?

The 25-word answer is:

“HTML5 is a major update to HTML that brings excellent new features to both websites and web applications, but also highlights an important older feature.”

Expanding on this definition, the four key things to know about HTML5 are:

  • it creates better semantic markup (the important older feature).
  • it allows for the creation of more robust web applications.
  • it allows for top-notch mobile web development.
  • creating websites and web applications with HTML5 is a best practice but, in all honesty, not a requirement. A Simple Explanation of HTML5

Where Did HTML5 Come From?

Created in 1990, HTML has always been a programming language that creates a website’s basic structure. To build a website, HTML “frames” it first, then things like copy and images are added to complete the job.

HTML updates are overseen by the World Wide Web Consortium, or, the W3C. When they began work on the next update in 2004, a group of outside companies spoke out against the direction the W3C was taking it.

The update was great for websites, the companies said, but not so great for the new web applications that were starting to appear. Also, the W3C’s suggested update wasn’t backwards-compatible with older versions of HTML, which would cause developers a ton of problems.

The companies felt that the W3C weren’t evolving HTML beyond a structural language, so they formed a separate group called the Web Hypertext Application Technology Working Group, or WHATWG (pronounced “what-wig”) to do just that. Their goal was to build a new HTML that worked well for both websites and web applications and would also be backwards-compatible with the old HTML.

In 2007, the W3C agreed with WHATWG’s point of view. The two groups remained separate but worked together on creating a new version of HTML, naming it “HTML5.”

The two groups are still working together as the HTML5 specification isn’t finalized as of this article, but it’s still possible to use it to create websites and web applications…as many do.

Semantic Markup

Semantic markup is HTML written in a way that gives site content specific meaning. Semantic markup is not a new a concept: it existed well before HTML5.

HTML5 does create excellent semantic markup though…better than earlier HTML versions. Metaphorically speaking, the semantic markup of earlier versions tells the world, “this is some site content” while HTML5 semantic markup tells the world, “this is some site content, now let me give you some detailed information about it.”

Sites written with semantic markup are easier to read on a multitude of devices: desktops, laptops, smartphones, screen-readers for the disabled, gaming consoles, just to name a few. But search engines also like semantic markup…so much so that web designer Jeffrey Zeldman said it best in 2009:

“Client who saves $5,000 buying cut-rate non-semantic HTML will later spend $25,000 on SEO consultant to compensate”

Correct! Site content wrapped in non-semantic markup is tough for search engines to understand; therefore, it’s tough for search engines to rank and list in their search results.

Hiring an SEO company to fix this is costly. If your site is coded with semantic markup at the beginning, this cost can be, at the very least, reduced.

To be clear: semantic markup up will not improve a site’s search engine ranking. It just makes it easier for search engines to understand a site’s content, which in turn, makes it easier to rank in search resullts.

Think of site content as a pirate’s treasure chest full of gold. Semantic markup gives search engines an awesome treasure map.

One last note on the subject: sites written with semantic markup are said to be “following web standards.” Web developers have been coding with web standards for years, but too many haven’t. A push for all developers to use web standards has always existed, but HTML5 has strengthened this push more than ever before.

Web Applications

A website is a site that gives people information, but doesn’t offer a lot in terms of interaction. People may be able to fill out a form of some sort while visiting the site, but the interaction won’t go much beyond that.

A web application is a site that gives people information and offers a lot in terms of interaction. Some interaction examples are:

  • adding copy, images & videos.
  • removing copy, images & videos.
  • editing copy, images & (sometimes) videos.
  • writing product reviews.
  • sending messages to people.
  • letting people know your current location.

Looking at this list, Facebook, Twitter, FourSquare, and Yelp are great examples of web applications.

Other web application examples include: Hotmail, Yahoo Mail, Gmail, Google Docs and Google Maps.

HTML5′s role in web application development is a bit tricky to describe: start with understanding that there’s “HTML5″ and there’s “HTML5-related technology.”

The following is an incomplete list of things that are part of HTML5:

  • Video: playing video on a website without needing things like Flash.
  • Audio: playing audio on a website without the need for plugins.
  • Canvas: using code to automatically draw stuff on a website.
  • Drag & Drop: dragging and dropping stuff on a website.
  • Application Cache: storing website content, such as images, on a device, making the site run faster.

The following is an incomplete list of things that are HTML5-related technologies:

  • WebGL: creates 3D graphics on a website.
  • Web Workers: a method of running and storing website code behind the scenes.
  • Geolocation: lets websites know where site visitors are geographically located.

HTML5 and HTML5-related technologies can be combined with other technologies to create compelling web applications.

For the sake of easy explanations, I called these things “HTML5-related technologies” but I can’t stress enough that they’re not HTML5. They’re “HTML5-related” at best and even that’s a stretch of the terminology.

Many don’t care about this the proper term usage but do not be surprised if a real stickler comments on this article, telling me that calling these things “HTML5-related” is a no-no. If you want the techie details on this, visit MDN’s HTML5 page and take note of the section called “Technologies often called part of HTML5 that aren’t.”

Mobile Web Development

The web browsers pre-installed in the majority of mobile devices released in the past two years support HTML5: both websites and web applications.

First, understand that there are native applications and there are mobile web applications. Native applications are what are commonly called “apps” or “native apps;” small applications that you download from places such as Apple’s App Store or Google’s Android Market. Mobile web applications are applications that run inside a mobile web browser such as Safari Mobile or Opera Mini; they’re called “mobile web apps” nowadays.

So if you’re on an iPhone, you can open the Safari Mobile web browser (a native app) and go to Facebook’s mobile site (a mobile web app). Or, you can open the App Store (another native app) and download the Facebook application (yet, another native app) and use Facebook from there.

The good thing about native apps is they have more functionality than mobile web apps. The good thing about mobile web apps is that they’re less expensive to create than native apps.

A native app that lives on your smartphone can use other native apps to aid in a particular task…the camera, the address book, directional apps like the compass and the maps, etc. Except for very few instances, mobile web apps can’t do any of this as of this article; therefore, native apps have more functionality.

But it’s always a good idea to make your app to work on as many devices as possible, and doing so can be expensive. The current cost for creating an app that works on just iPhones and Androids is in the five-figure range. Mobile web apps are coded to work on mobile web browsers, which practically every mobile device has. So a mobile web app will work on almost any mobile device, and will be cheap to create when compared to the cost for creating a native app for every device.

HTML5 is well-suited for mobile web apps for a lot a reasons, a big one being the above-mentioned application cache.

When combined with certain HTML5-related technologies, application cache allows mobile web apps to work on devices even if the device doesn’t have an internet connection! These apps would probably need a connection to work as fully intended, but they can still do lots of things offline.

Best of all mobile web browsers support many HTML5 features already. Non-mobile browsers are catching up, but the mobile browsers adopted them first and are ahead in the race as a result.

Because of their offline functionality and early adoption rate among mobile devices, lots of web developers are promoting HTML5 mobile web apps as a viable alternative to native apps. Mobile web apps will need to be able access things like the camera if they expect to beat the native guys, but I believe they’ll have access to many of these things eventually.

Making The Site Look Pretty

There are some HTML5 things that can make sites look good, but very little. And again, these things don’t work in many desktop browsers, which are still used more than mobile browsers.

So to make a site look good in as many browsers as possible, these three things are currently the best tools to do so:

  • CSS3: applies pictures, colors and few cool effects to websites.
  • JavaScript: creates interactivity on a website.
  • JavaScript-related technologies: jQuery is the biggest one of these right now.

These things are not HTML5, but you will see them used in both HTML5 websites and web applications.

How Is HTML5 Being Used As of This Article?

In many ways…

  • HTML5 games make up a bulk of the HTML5 web apps being created: Facebook is very committed to HTML5 games.
  • Web designers are excelling at creating sites with semantically correct HTML5 markup and making them look pretty. The Boston Globe is one of the most celebrated of these sites but HTML5 Gallery also provides some nice samples.
  • Web applications are popping up everywhere. One of my favorites is TweetDeck Web.
  • There are a few mobile web apps out there. Some use a lot of HTML5 and its related technologies, some use just a little of it. jQuery Mobile Gallery is site that uses a fair amount of HTML5 stuff; the sites they display use HTML5 to varying degrees.

I can’t stress the importance of web standard semantic markup enough. Businesses that don’t have it in their sites need to get it in there sooner, not later. They should either edit their current site and add the markup, or plan a site redesign that will include such markup.

If businesses go with the redesign, they can also make it look pretty at that point using CSS, JavaScript and JavaScript-related technologies.

As for web applications and mobile web development, I have to refer to a previous statement…creating websites and web applications with HTML5 is a best practice but, in all honesty, not a requirement.

For example: Facebook and Twitter’s desktop browser applications converted to HTML5 only recently, but millions of people were using them as web apps before that. And both have robust mobile web applications, each one created with an older version of HTML. This is also true for CNN, Fox News, Sephora, ESPN, Ford, Dollar General…I can probably go on and on.

So there’s no clear path here: using HTML5 certainly helps but it seems that not using it doesn’t hurt. Regardless of this, I believe that all sites and web apps from here on in, should be created with HTML5.

I also believe that deciding whether to use HTML5 should not be the first task of a business-that should be focusing on delivering high quality content.

I’m basing this opinion on what I learned at the mobile promotion panel during Social Media Week 2011. Over and over again, the panelists stress how the mobile web was a better promoter than the native app and that we should spend more time developing an effective content strategy instead of following tech trends. Not one panelist mentioned HTML5 and there were many developers working with it at that time.

So my HTML5 suggestions for business don’t have that much to do with HTML5. They are:

  • Confirm that your web developer or agency will create your site with HTML5 semantic web standard markup: Most do, but double-check anyway.
  • Remember that HTML5 isn’t the only thing that makes your site look good: The CSS3 and JavaScript stuff is very important here.
  • Develop your content strategy first: doing so will help you decide what parts of your content are the most important.
  • Don’t think you need to create an HTML5 app: You may find that you don’t need it after you devise your content strategy and that a website will do the job just fine.

In closing, HTML5 is a highly discussed and debated subject right now and some may agree or disagree with what’s being said here. So please feel free to comment on this article and post your opinions.

Would you like to Tweet this page?