What is HTML5

September 21, 2010

HTML

What is HTML5

HTML was developed by the W3C until 2004, when members of the HTML working group grew disturbed with the direction the W3C was going with HTML. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called WHATWG (Web Hypertext Application Technology Working Group) devoted to evolving the Web. They started by working on a new specification of HTML – HTML 5.

HTML 5 is a new version of HTML 4.01 and XHTML 1.0 focusing on the needs of Web application developers as well as evolving HTML and addressing issues found in the current specifications.

We’re sure by now you’ve heard the term “HTML5″ thrown around by the likes of Apple and Google. This is the next evolution of HTML, or Hyper Text Markup Language, which forms the backbone of almost every site on the Internet. HTML4, the last major iteration of the language, debuted in 1997 and has been subsequently poked and prodded so that it can handle the demands of the modern Web.

The main building block of any website is its markup language. The markup language is what structures the information on the page – indicating that one block of text is a heading and another block is a paragraph or a list. HTML 4 and xHTML are the most commonly-used markup languages today, and they share a common set of elements for marking your web-based documents. Using the elements correctly means that you’re applying concrete semantics to your documents, giving them the best chance of being understood by the widest variety of user agents.

Why is it such a big deal?

HTML 4 has been tweaked, stretched and augmented beyond its initial scope to bring high levels of interactivity and multimedia to Web sites. Plugins like Flash, Silverlight and Java have added media integration to the Web, but not without some cost. In search of a “better user experience” and battery life, Apple has simply dropped support for some of these plugins entirely on mobile devices, leaving much of the media-heavy Internet inaccessible on iPads and iPhones. HTML5 adds many new features, and streamlines functionality in order to render these processor-intensive add-ons unnecessary for many common functions.

Assuming content providers sign on (and many are), this means you won’t have to worry about installing yet another plugin just to listen to a song embedded in a blog or watch a video on YouTube. Similarly, this is a big deal for platforms that either don’t support Flash (e.g., iPhone and iPad), or have well documented problems with it (e.g., Linux). It will be a particular boon to those smartphones for which supporting Flash has proven problematic.

So what exactly can it do?

HTML5’s most touted features are media playback and offline storage. With HTML4, sites usually have to reach for Flash (or Silverlight) to simply show a video or play music. HTML5 lets sites directly embed media with the simple HTML tags “” and “” — no plugins required. There are some issues currently being debated by the powers that be, and a particularly sticky one deals with file format. Some companies, especially Mozilla, are pushing for the adoption of the open-source Ogg format, which is free for anyone to use. Others, like Apple, would prefer the higher quality H.264 format, which will eventually require browser makers to pay licensing fees to support it.

The other major addition that has garnered media attention is the ability to store offline data for Web apps. One of the major roadblocks in the march to replace traditional desktop apps has been that the Web-based ones are useless without an Internet connection. Google developed a stopgap solution with Gears, but that product has been retired as the company is shifting its focus to HTML5. This will mean being able to create files in Google Docs or draft e-mails when away from an Internet connection. These changes would be automatically synced the next time you’re online. HTML5 also adds new interactivity features, like drag-and-drop, that have already found their way into Gmail.

How can I take advantage of it now?

Most likely, you’re already taking advantage of it without knowing. Safari (both mobile and desktop), Google Chrome and Firefox 3.6 all support at least some elements of HTML5. (Internet Explorer 8’s support for HTML5 is very limited.) And many Google products already use some features of the next-generation protocol. If you’re using Safari or Chrome, you can check out an experimental version of YouTube that makes use of HTML5’s video features. Gmail and Google Reader have adopted parts of the standard, as well. Additionally, any site listed here as being “iPad ready” is making extensive use of HTML5, including The New York Times, CNN and CBS. The latter of which recently announced it would be phasing out Flash in favor of HTML5 for all video content. If you want to dig a little deeper, you can check out a series of experiments from Mozilla that show just what HTML5 can do, and these design roundups show off what it brings to the table for designers and typographers.

Flash won’t be going away anytime soon, of course; it’s still widely used and supported, and those Flash-based games that we love so much are impossible to recreate using HTML. But it’s important to know that when you hear people tossing about the phrase “HTML5,” it isn’t just some meaningless buzz word; they’re talking about the future of the Internet.

What Is Semantics?

Speaking loosely, semantics is the application of meaning to structure. In HTML terms, this means using the elements of HTML that best describe the information they contain. The HTML element should attach meaning to the content. This includes using the <abbr> element to identify an abbreviation, using one of the various heading elements ( <h1>, <h2>, <h3> ) to identify section headings and article titles, or the more explicit use of the <a> element to identify a hyperlink.

However, HTML 4 and xHTML don’t have a particularly wide variety of elements available, which leads to a limited ability to semantically describe the content of your page effectively. The semantic interpretation of HTML 4 has always been a subject of debate among web standards experts. Thankfully, HTML 5 offers a significantly expanded palette of semantically meaningful markup elements.

How Does Semantic HTML Help My Website?

Human shoppers will see only the way you’ve elected to design your website, but the devices and methods they use to access that information can greatly benefit from precise semantics. For example, online shoppers could be using a mobile browser that re-organizes the content on your site to be easier to use on a smaller screen, assistive technology that is able to group information according to the semantic indicators you’ve provided, or a search engine that can better index your site because the semantics describe the types of content. In short, there is always potential for you to benefit from semantic HTML.

Does proper use of semantics mean that search engines will rank your site higher? No, not necessarily. Does it mean that disabled users will be able to use your website? Again, no, not necessarily. But semantics are one step along the road towards all of these goals.

What New Elements Are In HTML 5?

Most of the new elements in HTML 5 are directly related to content structure and information types. The new content structure types include <section>, <article>, <aside>, <hgroup>, <nav>, and <figure>. New information type elements include <video>, <audio>, <meter>, <time>, <details>, and <summary>. There are many others, but these elements are particularly likely to be useful in ecommerce.

Most of the current discussion of these elements relates to their use in blog posts or articles. The examples provided tend to explain how a given element applies to your article titles and bylines, or including information in applications. In fact, the examples provided by the W3C for the <article> element specifically indicate a blog entry or newspaper article as the logical document content for that element. But that shouldn’t be interpreted to mean that they aren’t applicable to ecommerce!

Key New Features

One of the most key elements is article, which represents a single, independent piece of content on your site. In ecommerce, this is essentially your product. On a product page, it should enclose all the details about your product: pictures, description, details, purchase information. On a category page, it’s the container for each product shown. “Article” doesn’t just mean a written document; it’s also an article of clothing.

A major game-changer coming in HTML 5 is the <video> element. Particularly given the decision by Apple to not support Flash on the iPhone or the iPad, the use of a browser-driven video player has great potential for any website making significant use of video. Right now, support isn’t well enough developed to forego Flash video as well; but providing use of the video element to at least certain applications may already be necessary.

It should be readily apparent from the usage of the <article> element that one of the principles applied in development HTML 5 was that the name of an element should clearly indicate the usage of that element. This doesn’t mean that it’s necessarily obvious how to use them, however. Examples of usage can tend to bias expectations in one direction, as in the example above, where article appears to represent a written document.

Currently, most product pages are marked up using a variety of <div> elements. The lack of distinguishing structural elements in HTML means that on any given product page, all types of information are semantically equal. This can change in HTML 5. With the new elements available to structure your page, you can now clearly indicate what area of your page is the “meat” of the product page: the article section. Within that area, you can structurally separate any figures representing the product, details about the product, supplemental information that is only peripherally about the article, or the progress a visitor has made towards completing his or her order for complicated products.

These structures have great potential for future usability of a site, once they are fully supported by all major browsers.

When Can I Use HTML 5?

This article is only about one area of HTML 5: new HTML elements. HTML 5 actually encompasses a whole host of new features designed to make the development of web applications easier, and most of those features are quite a long way from being useful. However, the new elements can be used today, despite the fact that many web browsers either don’t support them or don’t offer complete support.

With the separation of structure from presentation as the preferred method to build a website – CSS and HTML, as you may have heard it described – it really doesn’t matter in any significant way whether most browsers support these elements, with a few unsurprising exceptions.

For the most part, using HTML 5 elements requires nothing more than declaring some styles for them in your cascading style sheets. The one little exception is that Internet Explorer doesn’t acknowledge CSS declarations for any element it doesn’t already recognize. As a result, a small amount of JavaScript is required to make Internet Explorer recognize the elements. This article isn’t really the place to go into how to provide this ability, or how to style new elements with CSS, but here are a few resources for more detailed information:

Graphical Explanation

Summary

There’s nothing in HTML 5 which you can apply today to shoot your website to the top of the marketplace. Anything you do is likely to take years to have sufficient market penetration to make a huge difference. But, as you know already, demand drives development. There are enough benefits to HTML 5 down the road that it’s well worth demanding support from your vendors and developers.

, , ,

About Souvik Banerjee

Web Developer and SEO Specialist with 10+ years of experience in open source web development. He is also the moderator of this blog (www.rswebsols.com)

View all posts by Souvik Banerjee

Related Posts

One Response to “What is HTML5”

  1. dubstep music Says:

    This is really fascinating, You are an overly skilled blogger. I have joined your rss feed and look forward to in search of more of your great post. Also, I’ve shared your website in my social networks

    Reply

Leave a Reply

Current ye@r *