Testing HTML5

dConstruct week is in full swing. The conference itself is tomorrow. Remy and Brian are doing their workshops today. Myself, Rich and Nat did our HTML5 and CSS3 Wizardry workshop yesterday.

I was handling the HTML5 side of things and had quite a bit of fun with it. I put together an HTML5 pocket book using using Natalie’s superb CSS. View it in a Webkit or Gecko-based browser and then print it out to experience the CSS3 transform magic. Natalie made a CSS3 pocket book for the workshop which was a nice self-documenting example of CSS transforms. Hers turned out much neater than mine—my folding fu isn’t so good. But hey, it’s the thought that counts and I figured it was nice to give every attendee something hand-crafted.

I prepared some exercises for the workshop and I have to admit that I had an ulterior motive with one of them. Each attendee was provided with two sheets of paper. One sheet of paper listed some new elements in HTML5 in alphabetical order:

  1. article
  2. aside
  3. details
  4. figure
  5. footer
  6. header
  7. hgroup
  8. nav
  9. section

On another sheet of paper, I listed definitions of those elements taken from the spec but in no particular order:

  • …a group of introductory or navigational aids.

  • …represents a section of a page that consists of content that is tangentially related to the content around it, and which could be considered separate from that content.

  • …used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

  • …typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

  • …some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

  • …a section of a page that links to other pages or to parts within the page: a section with navigation links.

  • …a thematic grouping of content, typically with a heading, possibly with a footer.

  • …a section of a page that consists of a composition that forms an independent part of a document, page, or site.

  • …additional information or controls which the user can obtain on demand.

I then asked the attendees to match up the definitions with the element whose name sounded like the best match. To be clear: this wasn’t a test of knowledge. I was testing the spec.

Giving this exercise to thirty very savvy web developers yielded some clear results. There’s definitely a lot of confusion around when to use section and when to use article. I’m not convinced that there needs to be two different elements, especially now that the article element no longer takes the cite or pubdate attributes. figure and aside were also an area of confusion.

When the workshop was over, I collected the pages with everyone’s answers. Once I get some time I’ll publish the results, probably in a spreadsheet. Then I can present that data to the WHATWG list. Some people on IRC were wondering why my superfriends and I haven’t presented our concerns by email. Well, we will. But I think there’s a lot of value in publicly discussing this stuff (and soliciting feedback). Mostly though, I’ll feel a lot more comfortable about raising an issue if I can back it up with some data. There’s a big difference between telling Hixie your opinion and giving Hixie data.

So, in a very real sense, I got a lot of the workshop. It took quite a while to put the workshop together. The face-to-face meeting with my unicorn-powered peers in New York proved to be absolutely invaluable. I was tweaking the slides right up till the day of the workshop; not because I was rearranging the content, but because the spec was literally changing overnight (albeit in small ways).

Now that the workshop is over, I can relax. And relax I will …in Canada. I’m off to Whistler this weekend for Jessica’s brother’s wedding, followed by a couple of days in Vancouver.

Alas, that means I won’t be around for all of dConstruct. I’ll be able to catch Adam Greenfield followed by Mike Migurski with Ben Cerveny before heading up to Heathrow. But I won’t be able to make it to BarCamp.

Well, I’m sure that everyone who’s coming to Brighton will have plenty of fun without me. And I plan to have plenty of fun in British Columbia …though at some stage, I need to make some time to collate all that yummy data from the workshop.

Have you published a response to this? :

Previously on this day

13 years ago I wrote Microformats triple bill

Three microformateers at BarCamp London.

13 years ago I wrote Virtual trainspotting

A mashup of trains and maps blows my mind at Barcamp.

15 years ago I wrote The approaching storm

Frances is getting closer to Florida. The good news is that, at the moment, it has decreased from a category four to a category three hurricane.

15 years ago I wrote Waiter, there's music in my DRM

Microsoft has soft-launched its music downloading service. Naturally, lots of people are comparing it to the iTunes music store and evaluating their relative merits.

15 years ago I wrote The calm before the storm

Hurricane Frances is getting closer. People here in Saint Augustine have been stocking up on water and other supplies. Things are still quite calm here though.

16 years ago I wrote Laptop lamentation

I had a horrible experience today. My mobile world literally came crashing down around me.

16 years ago I wrote The Uncertainty Principle Is Untenable

It really takes a lot for spam to be memorable, but this is one of the weirdest I’ve seen a long time.

17 years ago I wrote Stop me before I paint again

Banksy is a London grafitti artist. This is my favourite painting of his.

17 years ago I wrote BBC + RSS = :-)

Excellent news. The BBC now has RSS feeds.

17 years ago I wrote Featured Freelancer

Catch it while you can. I’m a featured designer this month over at the Freelancer Network.