Quick impressions of HTML5

Quick impressions of HTML5

I’m an XHTML guy. I love everything about it: the sexy acronym, the concept of a “better” HTML, the right-or-wrong validation, and of course the lowercase tag names (UPPERCASE TAGS ARE UGLY). So when I first read about the death of the XHTML 2 spec and the advent of this new thing, HTML5, I wasn’t really pleased. HTML is old and crufty; why are we returning to it?

The truth, of course, is that HTML5 is anything but crufty. (And if you’re wondering: yes, it is HTML5 without a space.) There’s a lot to love about the new spec even if it’s not yet final and browser support is limited (currently) to the latest versions of Safari, Firefox, and Chrome.

I don’t intend to write up a full-featured review of HTML5. First, it’s already been done (see below for a list of great HTML5 resources); and second, I’m far from qualified to do that. But I did want to share a couple of my impression about the “next big thing” in web development.

Favorite features

One of my favorite features is the simplified DOCTYPE declaration. Here’s a valid pre-HTML5 declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

and here’s how it looks in HTML5:

<!DOCTYPE HTML>

That’s it! Nice… something I won’t have to copy-and-paste from other pages since it’s now so easy to remember.

My other favorite are the built-in validation and usability enhancements in forms. Two examples:

  1. <input type=”date” /> now provides a pop-up date picker, and
  2. <input type=”email” /> will ensure only valid e-mail addresses are input.

There are other useful input types as well; 465 Berea St. has a great round up of them. A great usability helper is now available, too: the placeholder attribute. Just add it to an input tag, such as <input type=”text” /> and a HTML5-aware browser will display that placeholder text (dimmed) as a hint within the field until the user clicks or tabs into the field.

These new features (date picker, e-mail and other validation types, and in-field hints) have all been available with javascript, but their native support in HTML5 makes things so much easier for developers. I know I’d rather use the placeholder attribute rather than including a javascript framework and remembering the proper syntax for achieving the same in-field hinting. Not to mention this native support shaves off kilobytes from the page by not requiring a javascript library like jQuery to (easily) implement.

Not so-favorite features

I was surprised to read that quoted tag attributes (either single- or double-quoted) are no longer required. The W3′s working spec details it here, but in short: if an attribute value doesn’t contain any spaces, it can be unquoted. So this is valid in HTML5, though it isn’t in XHTML:

<p class=awesometext>Awesome!</p>

I definitely prefer the look of quoted attributes and will likely continue using them for code aesthetics.

HTML5 introduces a slew of new organizational tags, too: header, footer, section, article, nav, aside, hgroup, etc. Their purpose is to take semantic markup to the next level. Current web standards advocate use of heading tags (h1, h2, h3, etc.) to organize content hierarchically. But XHTML (and previous versions of HTML) lack native tags to organize content structurally. So developers use div tags with IDs and classes to build their page. You get code like this:

<div id="container">
	<div id="header">
		<h1>Great headline</h1>
	</div>
	<div id="content">
		<div id="leftNav">
			<ul><li>...</li></ul>
		</div>
		<div class="story">
			<h2>Story headline</h2>
			<p>...</p>
		</div>
	</div>
	<div id="footer">Copyright 2010, etc.</div>
</div>

In HTML5, this type of markup would be replaced with something like:

<header>
	<h1>Great headline</h1>
</header>
<nav>
	<ul><li>...</li></ul>
</nav>
<article>
	<h2>Story headline</h2>
	<p>...</p>
</article>
<footer>Copyright 2010, etc.</footer>

(Some nice visual comparison can be found on A List Apart’s HTML5 Preview article.) I think these new tags are a positive addition, but I include them under the heading “not so favorite features” because I wonder at their relevance. Compared to the new form features discussed above, which used to require a lot of javascript or a framework plug-in, these new tags don’t seem to save developers much time or provide new usefulness. Typing <article> instead of <div class=”article”> isn’t much of a time saver. I realize that pages coded using these new HTML5 structural tags will provide out-of-the-box layout in HTML5-aware browsers, but I think unstyled HTML5 content will be as common as unstyled XHTML content: that is to say, it won’t be.

HTML5 resources

PS – Thanks to http://www.network-science.de/ascii/ for the nice ASCII-art image for this post, too.

  1. The growling of an approaching Leopard My posts tend to be exercises in logorrhea, but this...
  2. Mock-up to valid XHTML: how to build a web page – part 2 This is the second in a two-part series on the...
  3. Great WordPress utilities and free fonts If you’re a WordPress blogger (as you should be) then...

One comment

  1. I recently came across http://html5rocks.com, a site developed by Google to promote the HTML5 standard. It’s a very cool site that explains, both with a “code playground” and a nice presentation (itself written in HTML5), the cool features of HTML5. They include local storage, web workers, geolocation, and other APIs; the new HTML tags, attributes, and microformats; and the use of audio and video tags. Check it out!

Leave a Reply

You must be logged in to post a comment.