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.
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:
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:
- <input type=”date” /> now provides a pop-up date picker, and
- <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.
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:
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>
- Get Ready for HTML5 (from A List Apart)
- Dive Into HTML5 (an excellent, whimsical approach full of useful information)
- HTML5 Doctor (blog-style articles)
- Smashing Magazine’s HTML5 cheat-sheet (PDF)
PS – Thanks to http://www.network-science.de/ascii/ for the nice ASCII-art image for this post, too.
Related: If you liked this, check out:
- The growling of an approaching Leopard My posts tend to be exercises in logorrhea, but this...
- Mock-up to valid XHTML: how to build a web page – part 2 This is the second in a two-part series on the...
- Great WordPress utilities and free fonts If you’re a WordPress blogger (as you should be) then...