Article
About the Author
Bruce Lawson
Bruce evangelises Open Web Standards for the Opera browser. He's a member of the W3C's Mobile Best Practices Working Group, the Web Standards Project and co-wrote and co-edited "Web Accessibility: Web Standards and Regulatory Compliance".
Bruce drinks Guinness and works off the stout-related stoutness by kickboxing. He's a purple belt and aims for black before he turns 50. He blogs at brucelawson.co.uk and is one of the volunteers behind www.html5doctor.com.
Yes, You Can Use HTML 5 Today!
The blogosphere was jerked into excitement when Google gave a sneak preview of its new service, Google Wave. Only the select few have an account, but there’s an 80-minute video about it on YouTube for the rest of us. The service is an HTML 5 app, and so HTML 5 has gone from being too far away to care about to today’s hot topic.
There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.
What Is It?
To some, it’s an outrageous attempt by browser manufacturers to foist what they want onto developers. In SitePoint’s HTML 5: Now or Never? article, Tommy Olsson described it as “an abomination ... it mocks everything I consider important on the Web.” Others see it as the way forward for developing powerful multimedia web apps on an open architecture, without Flash or Silverlight or similar proprietary technologies. Doug Schepers, the W3C’s Team Contact for the SVG and Web Apps Working Groups says, “HTML 5 is not a technical achievement, it’s a social movement.”
The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. One clue is in the working group’s original name, before it was brought into the W3C camp: Web Hypertext Application Technology Working Group. The original goal for HTML 5 was to make it easier to develop Web applications. There’s evidence of this in the rash of new JavaScript APIs and support for offline development, some of which are already available in a browser near you.
Markup
We’ll start by thinking about marking up a typical blog today. Like the vast majority of sites on the Web, blogs comprise a header, some navigation (often a sidebar or two), a main content area, and a footer:
Currently, there are no ways in HTML 4 to mark up these elements in a semantic fashion—that is, HTML 4 offers no footer or header elements of its own. Instead, they’re usually wrapped in a generic div element, a technique which is described in the HTML 4 specification:
TheDIVandSPANelements, in conjunction with theidandclassattributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV), but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, thelangattribute, etc., to tailor HTML to their own needs and tastes.
When developing the HTML 5 spec, the editor, Ian Hickson of Google, analyzed over a billion web pages to find out how authors were actually using these elements. He discovered that in the top 20 class names used in the markup for this huge set of data were classes for common requirements: footer, header, nav, menu, content, and main.
So the HTML 5 spec has a host of new, structural tags such as header, footer, nav, article, and section, which fit these common requirements and allow us to mark up our archetypal blog with more meaningful elements, like so:
What’s really interesting is that we can use HTML 5 elements right now, even though the main browsers are yet to support HTML 5, because CSS allows you to style anything.
By default, CSS assumes that an element is inline. For HTML 4 elements such as DIV, the browser’s own default style sheet overrides that default, but for our HTML 5 elements, we need to do that manually. The following CSS rule does the trick:
header, footer, nav, section, article {
display:block;
}
Then we can add style rules—floating, background colors, margins. I’ve put together an example; let's check it out!
Depending on which browser you use, you will either see a colorful layout, or no styles at all. Here's how it should look, as seen in Safari 4:
Older versions of the Gecko rendering engine, currently used in Firefox 2 and Camino, have a parsing bug which means Gecko closes an unknown element when it sees the start tag of a block-level element like p, h1, or div. There are workarounds, but as Firefox 3 is out, Camino 2 is in beta, and both browsers’ users tend to upgrade quickly, it’s safe to assume that the problem will be history by the time you start building HTML 5 sites for the real world.
There’s a more serious problem with our old friend, Internet Explorer. It refuses to display this basic CSS until you prod it with a pointy JavaScript-shaped stick. Yes, you heard right—you need some JavaScript to make CSS style your HTML. Over the page, we’ll find out what we need to do to make HTML 5 elements work in IE 8.