Practical Ecommerce

What Is HTML 5?

Editor’s Note: Ecommerce merchants use complex technologies in their businesses. A working, “need to know” understanding of these technologies can help merchants. To address this, we’ve launched our “Need to Know” series, whereby we’ll address complex topics in a manner that can benefit most merchants. For this installment, contributor , a web accessibility expert, explains HTML 5, below.

There’s still a fair amount of time before HTML 5 is regularly seen on the world wide web. But it’s worth taking a closer look at some of the changes that are coming, and how they may benefit your ecommerce website.

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.

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?

Screen capture of HTML5Gallery.com, showing sites built with HTML 5.

Screen capture of HTML5Gallery.com, showing sites built with 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:

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.

The “Need to Know” Series

Joseph C. Dolson
Joseph C. Dolson
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas