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? :

Related posts

Placehold on tight

Getting consistent browser behaviour for the placeholder attribute.

Figuring out

You can quote me on this markup pattern.

Progress

Something is happening.

Pursuing semantic value

Agreeing and disagreeing with Divya.

Timeless

Who knows where the time element goes?

Related links

Bruce Lawson’s personal site  : Eulogy for Flash

Web developers aren’t going to shed many tears for Flash, but as Bruce rightly points out, it led the way for many standards that followed. Flash was the kick up the arse that the web needed.

He also brings up this very important question:

I’m also nervous; one of the central tenets of HTML is to be backwards-compatible and not to break the web. It would be a huge loss if millions of Flash movies become unplayable. How can we preserve this part of our digital heritage?

This is true of the extinction of any format. Perhaps this is an opportunity for us to tackle this problem head on.

Tagged with

HTML5 accessibility

A glanceable one-stop-shop for how today’s browsers are dealing with today’s accessibility features. Then you can dive deeper into each one.

Tagged with

HTML5: The New Flash

A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.

I don’t agree with everything he says here, but I strongly agree with his preference for declarative solutions over (or as well as) procedural ones. In short: don’t make JavaScript for something that could be handled in markup.

This part really, really resonated with me:

The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

Tagged with

HTML5 Differences from HTML4

I just noticed that I’m mentioned in the acknowledgements of this most handy of W3C documents. This pleases me disproportionately.

Tagged with

On File Formats, Very Briefly, by Paul Ford · The Manual

A history lesson and a love letter to the early web, taking in HTML, Photoshop, and the web standards movement.

Those were long years, the years of drop-shadows. Everything was jumping just slightly off the screen. For a stretch it seemed that drop-shadows and thin vertical columns of text would define the web. That was before we learned that the web is really a medium to display slideshows, as many slideshows as possible, with banner ads.

Tagged with

Previously on this day

19 years ago I wrote Microformats triple bill

Three microformateers at BarCamp London.

19 years ago I wrote Virtual trainspotting

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

21 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.

21 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.

21 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.

22 years ago I wrote Laptop lamentation

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

22 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.

23 years ago I wrote Stop me before I paint again

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

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

Excellent news. The BBC now has RSS feeds.

23 years ago I wrote Featured Freelancer

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