Are you ready for HTML 5?

Guest post by Char James-Tanny
I'm sure you've heard the news: HTML5 is here. Well, sort of. Maybe. Will you welcome it with open arms (and closed tags)? Or will you ignore it and hope that everyone else does, too?

The background

The WHATWG (Web Hypertext Application Technology Working Group) started developing HTML5 in June 2004. (Read how HTML5 got to that point at Dive into HTML5 [1] by Mark Pilgrim.) By January 2008, a joint effort between the WHATWG and the W3C (World Wide Web Consortium) resulted in the publication of the W3C Working Draft. The W3C Candidate Recommendation is due in 2012, with the W3C Recommendation due in 2022.

This would be the point where most people go: "Huh?"

Yes, 2022 is in the future...12 years in the future, to be exact. However, no one has to wait until the final recommendation to start using HTML5. In fact, Google has been using HTML5 for its search and mail application since mid-2009, and the Google PacMan page [2] (created to celebrate PacMan's 30-year anniversary) was created with HTML5 elements. One thing to note, though, is that Google's pages are not valid HTML5.

So why would you want to start using HTML5 now? And what do you have to watch out for? The answers, as always, are "It depends."

Pros

I think the following features will help with HTML5's adoption rate.

New DOCTYPE - Over the years, I have only met a handful of people who have memorized one of the HTML or XHTML DOCTYPES. That's because they look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

And:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd>

The new HTML5 DOCTYPE is easy to type and easy to remember:

<!DOCTYPE html>

That's it. And adding it to an HTML file is all that's needed to make an HTML5 page.

Semantic areas - Some folks don't care about semantics in any version of HTML. (In this case, "semantics" means that the name of the area matches its purpose. For example, do you know when you should use the CSS class "BoldRed"? How about "warning"? What about a div called "left" as compared to a div called "content"?)

For those who care about semantics, HTML5 addresses them with areas called header, nav, article, section, aside, and footer--you still need CSS to position them, though. All browsers except IE recognize these new areas, and IE will recognize them if you use a script to define them. (Remy Sharp has defined a script for this purpose; read about it at HTML5 enabling script [3].)

Less code and fewer lines of code - Because of the new DOCTYPE, fewer lines of code are needed inside the <head> tags for a basic HTML file. Because of the new semantic areas, shorter lines of code are needed inside the <body> tags, especially for those who have been using tables for layout, but the lines are shorter even when compared to XHTML. For example, compare the following examples:

HTML 4	XHTML 1.x	HTML5
<table> <tr><td>Header </td></tr>	<div id="header">	<header>
<tr><td>Nav </td></tr>	<div id="nav">	<nav>
<tr><td>Content </td></tr>	<div id="content">	<article>
<tr><td>Footer </td></tr> </table>	<div id="footer">	<footer>

No presentational attributes - The HTML5 spec doesn't include any presentational attributes, such as those typically used on body (background, alink, link, vlink, text, bgcolor), table (align, bgcolor, cellpadding, cellspacing, frame, height, nowrap, valign, width), and img (hspace, vspace). These attributes should be defined in your CSS file. OK, so most of these attributes were deprecated in earlier specs, but now they are officially considered obsolete. And yes, I know that this doesn't mean that people will stop using them, although I can hope!

No rules - HTML had no syntactical rules; you could use uppercase or lowercase for tags and attributes, you didn't have to add closing tags, you didn't need to use quotes. XHTML, which had to be well-formed because it is an application of XML, had rules: Tags and attributes had to be lowercase, and closing tags and quotes were required.

HTML5 takes us back to the period of "no rules". But unlike HTML, the hope is that you will actually use your own set of rules and avoid the "tag soup" of HTML. (Personally, I use XHTML syntax for HTML5, because it's what I'm most familiar with.)

Cons

Some features will be avoided, although the reasons may vary.

Video - HTML5 includes a <video> tag that requires a special format. However, the standard format hasn't been determined, and the discussions of Flash versus HTML5 video are leading to arguments, not solutions.

Canvas - The <canvas> tag, while now part of the HTML5 spec, was originally introduced by Apple (it was included with Firefox 1.5). While you can create some very cool effects with <canvas>, you have to be able to use JavaScript to control the functionality--unless, of course, you only want to create very basic canvas effects, which don't require any scripting.

New features that may catch on

In addition to the pros and cons, I think that developers will welcome some of the new features that HTML5 includes.

New global attributes - HTML5 adds several new global attributes, including "draggable" and "contenteditable." (Did you know that when Tim Berners-Lee created his first web browser, it was also an editor?) My first impressions of both were, "Eh, so what?" And then I saw some examples.

As a technical communicator, I hear a lot about "user-generated content". I also hear a lot about what technical writers think the ramifications will be. Something like "contenteditable" could fill the gap, providing a place where users can modify content and authors can incorporate it in the source.

"draggable" lets users move content from one place to another. The best example I've seen is by User Agent Man [4], who used it to demonstrate how to build a permissions list. I envision it being used to categorize information.

Forms - Forms have been greatly enhanced in HTML5. Form elements now include validation, for example, the browser validates the content in the email field to make sure that it is a valid email address. This means that once all browsers have been updated to use HTML5 form fields, programmatic validation isn't required.

At this time, only Opera 10.5 supports form fields. You would have to use a layered technique if you wanted to start using HTML5 form fields now.

Text field types:

email
file
number
password
tel
text
url

Other fields:

color
datetime
file
range

Examples

Want more information on HTML5? Check out these sites:

HTML5 Doctor, helping you implement HTML5 today [5]
HTML 5 Elements and Attributes [6]
How to Learn HTML5 [7]
What Does It All Mean? [8]
HTML5 Cheat Sheets [9]
Smashing Magazine's HTML5 Cheat Sheet [10]
When Can I Use... [11]
HTML 5 Demos and Examples [12]

Char James-Tanny is president of JTF Associates, Inc. and has thirty years of experience as a technical communicator. She speaks around the world on topics including Help authoring concepts and tools, accessibility, social media, web standards, collaboration and technology. Char is a 2010 Microsoft Help MVP.