Making a case for the dialog element in HTML 5

| Comments

I’d spent a lot of time writing a post about the glorious new tags introduced in HTML 5, but unfortunately, just as I was about to put it up, I caught wind that the spec for the <dialog> tag has been nixed. Considering that a hefty portion of my article was devoted to illustrating how the new tag could be put to use to display dynamically generated web comics of instant message conversations, I was understandably put out.

The dialog element was just a glorified definition list.

Originally, this was the suggestion for how to use <dialog>: <dialog> <dt>Brenda</dt> <dd>I love Coco Wheats!</dd> <dt>Jason</dt> <dd>I prefer Malt-O-Meal.</dd> </dialog> Look familiar? <dl> <dt>Coco Wheats</dt> <dd>A cream hot cereal with a cocoa treat.</dd> <dt>Malt-O-Meal</dt> <dd>Like Coco Wheats only with malt instead of coca powder.</dd> </dl> Yes, <dialog> is unabashedly based on the definition list. It doesn’t even try to hide the “data term” and “data definition” tags as it appropriates them. Admittedly, most people either don’t use or don’t know how to use definition lists because the official definition list specification is rather sketchy. But that’s no reason to hijack its structure! Personally, I do not think the definiton list structure is perfectly suitable for dialog markup because:

  1. It allows multiple definitions for one term (or quotes for one speaker... I feel it would be better to lump these into one element and use paragraph elements to break up longer monologues).
  2. There is no way to indicate time.
  3. There is no way to make comments, as in an interview when the author inserts an explanatory note or in a play when the scene changes)

Why do we need dialog markup, anyway?

Microsoft complained that they didn’t see the point in adding semantic tags for marking up conversations, something people currently use p and div elements to do. (Do recall that Microsoft doesn’t exactly have a stellar track record for leading the Web browsing experience to new heights of excellence.) They are also concerned that adding such an element to the HTML 5 spec would make more work for them.

Most discussions on this matter only use chat logs as examples of what dialog markup could be used for. Yes, chat logs seem rather trivial in the grand scheme of things. But what about plays? Interviews? Dynamically generated comics books? (Not to push my own cause!) Okay, excluding that last one, the other two are potentially big deals. Imagine if screen readers adopted a different tone when reading transcripts to the visually impaired. Imagine if we could use this to convey great plays of yore to little kids one day. None of this would happen tomorrow of course, but it can’t happen at all without proper markup.

We are told that plenty of people are currently using the paragraph element with a sprinkling of non-semantic tags and a few extra classes to get by and that that’ll have to do. To me, this sounds a lot like microformats. The semantics harpy in me wants special tags.

Ideas for <dialog>

For simple conversations

<dialog> <speaker>Brenda</speaker> <line>I love Coco Wheats!</line> <speaker>Jason</speaker> <line>I prefer Malt-O-Meal.</line> </dialog>

For plays

<dialog> <time>11:20am</time> <speaker>Brenda</speaker> <line>I love Coco Wheats!</line> <speaker>Jason</speaker> <line>I prefer Malt-O-Meal.</line> <time>11:30am</time> <aside>They have finished eating.</aside> <speaker>Brenda</speaker> <line>I think I ate too much.</line> <aside>Brenda burps</aside> </dialog>

For chat logs

<dialog> <time>11:20am</time> <speaker>Brenda</speaker> <line>Hiya Jason!</line> <time>11:30am</time> <speaker>Jason</speaker> <line>Sorry, I was away from my computer!</line> </dialog>

How would you markup a conversation?


comments powered by Disqus

Conference Schedule

Do you love web animation and digital storytelling?

Sign up for my mailing list and get updates when I post new projects, blogs, workshops, and shennigans.

Join my mailing list
Copyright © 2008 – 2019 Rachel Nabors