A little more conversation with dialog

Since publishing this article, dialog has been dropped from the HTML5 specification. The contents of this post are no longer valid but will be retained for posterity. At this time, there is no suitable replacement for marking up conversations, but there is much discussion on creating one. Get your opinions in so an appropriate solution to marking up conversations can be devised!

Less action, more conversation. That’s how that Elvis song went, right? OK, perhaps not. Regardless, the new dialog element introduced in HTML 5 is all about marking up the conversation, and it uses a couple of elements you may have already heard of. Sure, it’s a little less action than something like audio, but it is still a useful element to semantically mark up many forms of dialogue.

Defining dialog

The HTML 5 specification defines dialog as follows:

The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

That’s a lot of different types of dialogue that can be marked up. A dialog element contains the dt element for a speaker’s name, and dd for what they said. That’s right, dialog borrows two elements from dl to pair up a speaker and what they say. The definition of a dl itself has changed in HTML 5 to become an association list, pairing names (dt) with values (dd). dialog uses this in a similar way, pairing a name of a speaker with whatever they said.

This means that the dt is the source (speaker) of what is within the following dd, and the dd contains a quotation from that source. Therefore, dialog does not require the use of cite, blockquote or q. The only time a q would be appropriate within dialog would be if what one person said contained a quotation from someone else. It is also possible to use p within a dd, should you need to mark-up large responses as paragraphs.

Also, despite the fact both dialog and dl share dt and dd, a dialogue should never be marked up with a dl. However, appropriate uses of dl is beyond the scope of this article and will be revisited in a separate article.

Enough talk, let’s get practical

Marked Up Humour

My first example is very straight forward. Using dialog, I will mark up a hilarious “Knock, Knock” joke.

<dialog>
  <dt>Sam</dt>
  <dd>Knock, Knock.</dd>
  <dt>Eric</dt>
  <dd>Who's there?</dd>
  <dt>Sam</dt>
  <dd>Justin.</dd>
  <dt>Eric</dt>
  <dd>Justin who?</dd>
  <dt>Sam</dt>
  <dd>Justin time for dinner!</dd>
</dialog>

Note that two people are in this conversation, Sam and Eric. Their names are marked up with dt and what they said is placed in dd. Wrap it all up in a the fresh dialog, and you have a semantically marked up conversation!

Once your sides have stopped splitting, I’d like to direct you to something a little more complex: how Twitter can take advantage of dialog.

A Twitter Conversation

Twitter is a prime example of where dialog can be used in the real world. When a user posts a tweet, other users can reply by starting their tweet with @username, where username is whoever they are responding to.

<dialog>
  <dt><a href="http://twitter.com/akamike">@akamike</a>, <time datetime="2009-08-11T12:35:54">13 minutes ago</time></dt>
  <dd>Where is a good place to eat in town?</dd>
  <dt><a href="http://twitter.com/brucel">@brucel</a>, <time datetime="2009-08-11T12:37:56">11 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> Have your tried The Swine's Flu pub lunches?</dd>
  <dt><a href="http://twitter.com/Rich_Clark">@Rich_Clark</a>, <time datetime="2009-08-11T12:38:04">11 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> If you like seafood, try the restaurants at the waterfront</dd>
  <dt><a href="http://twitter.com/jackosborne">@jackosborne</a>, <time datetime="2009-08-11T12:40:02">9 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> What <a href="http://twitter.com/brucel">@brucel</a> said, or there are lots of good bakeries on the high street.</dd>
  <dt><a href="http://twitter.com/spambot148">@spambot148</a>, <time datetime="2009-08-11T12:45:16">4 minutes ago</time></dt>
  <dd><a href="http://twitter.com/akamike">@akamike</a> Gain 1000 followers in 5 minutes!</dd>
</dialog>

View a live example

Here, I have marked up an example of a conversation on Twitter, with users replying to the original speakers tweet. Once again, each person has had their name marked up in a dt but also uses the new time element to define the time of the tweet. In the new definition of dt, there is an example of using time this. Finally, the content of each tweet is placed in a dd. This shows how dialog could be used today in even some of the most popular services on the web.

Wrapping up

dialog is quite an easy element to grasp, and you’ll quickly find yourself marking up conversations, chat logs and more with this new element. As seen with the Twitter example, there is scope to add extra value to dialogue used in the real world. Now, go forth and have conversations knowing that you can easily mark them up in HTML 5!

Share and Save:

24 Responses to “ A little more conversation with dialog ”

Comment by John Holdun at August 12th, 2009 at 3:05 pm

Finally, Romeo and Juliet can cease their improper use of a definition list!

Comment by Arlo at August 12th, 2009 at 3:37 pm

So would it be appropriate to use to mark up the comments area of a blog?

Comment by Arlo at August 12th, 2009 at 3:38 pm

Let me try that again:

So would it be appropriate to use <dialog> to mark up the comments area of a blog?

Comment by ysbreker at August 12th, 2009 at 3:47 pm

What do ‘dt’ and ‘dd’ stand for in the context of ‘dialog’? They seem out of place here. They can’t stand for data term and data definition now, can they?

Comment by Bruce Lawson at August 12th, 2009 at 3:47 pm

Sweet article Mike.

But it doesn’t get rid of the nagging dislike I have of the dialog element – I still believe that blockquote and cite pairs are semantically more appropriate, even if cite has been redefined from html4 “Contains a citation or a reference to other sources.” to prohibit marking up names with cite: “A person’s name is not the title of a work … and the element must therefore not be used to mark up people’s names.”

More: http://www.brucelawson.co.uk/2006/breaking-news-w3c-specs-are-not-word-of-god/

Comment by Rachel Nabors at August 12th, 2009 at 4:10 pm

I can totally see this being used to generate web comics on the fly. The gears in my head are already churning!

Comment by Bastien at August 12th, 2009 at 4:10 pm

@ysbreker the HTML5 draft and this article says dl doesn’t stand for definition list anymore. It’s just an association list. But the name of these tags doesn’t make sense anymore, so they should be changed with something more semantic, like a “list” tag with “item” elements or something similar.

Comment by Florent V. at August 12th, 2009 at 4:42 pm

The trouble with the DIALOG element, and i would argue that it’s the very same that with the DL element and a few other HTML elements, is that it was designed as a specific solution for some not-that-common types of content. Weren’t other, more generic HTML elements already available to mark up that content? I think so.

The DL element is, in my opinion, vastly abused, even in the examples that you find in the current HTML 5 drafts. In HTML 4, the semantics of that element was kind of a blur (as for many HTML 4 elements actually). A lax interpretation would have the DT elements replace headings (Hn) whenever the author would feel like it. A restrictive interpretation would insist on the directionality of association, whereas any DD element characterizes the previous DT (and NOT the other way round like Hn do).

Accessibility experts i have spoken to say: use DL for proper definition lists, like glossaries, and that’s it. Other accessibility experts may disagree, however.

Now the HTML 5 spec expands on HTML 4, and defines DL as an association list, not a definition list. Actually the thing that is really defined is the relationship between DT and DD: not “DD characterizes the previous DT” (my previous definition), but a key/value(s) relationship of any kind you may think of. I see several consequences of that:

1. The redefined semantics of DT and DD may be useful, you could see it as a specialized solution to replace a HN+content structure when the content is closer to the key+value(s) paradigm than to the title+content one. The fact that DD elements only accept inline elements prevents DT+DD to be abused when HN+(whatever) would be more appropriate.

2. The “new” semantics of DT and DD is nice, but then their names are not that relevant. KEY and VALUE would be more explicit. Keeping the DT and DD names looks like muddying the cowpaths rather than paving them.

3. The DL element becomes irrelevant. Why would we need to wrap a series of DT+DD(s) with an element that has no clear semantics of its own (DL)? More generic containers (DIV, SECTION) should be enough for our occasional wrapping needs.

4. The new element DIALOG does have clear semantics, and using the generic key+value (read: DT+DD) inside DIALOG makes sense to some extent. But why do we need DIALOG, and not GLOSSARY (probably more useful to assistive technology and search engines alike than the anecdotic DIALOG or the often abused and now-generic DL), CONFIG (display config options as key-value pairs), METADATA (key-value also), etc.

Bottom line: DL+DT+DD looks like a semi-generic solution that is not generic enough to be used correctly without abuse, and that is too generic to properly mark real definition lists and glossaries. The new DIALOG element looks like an arbitrary specialization of the semi-generic DL. The whole DL+DT+DD+DIALOG situation is more of a mess in HTML5 than the already messy DL situation in HTML 4.

Comment by Steven Rossi at August 12th, 2009 at 5:55 pm

Eh, I don’t know. I’ve never been a fan of these elements that serve such a narrow purpose. Sure, lots of people use dialogs in their writing, but does it merit an html tag?

Comment by John Faulds at August 12th, 2009 at 10:50 pm

Sure, lots of people use dialogs in their writing, but does it merit an html tag?

Well, if like Arlo suggests, dialogue could be used to mark up comments, that makes it a very common usage. (By the way, why is it dialog and not dialogue? Is this a concession to US users?)

Comment by Wolf at August 12th, 2009 at 10:57 pm

I can already see some implementation/CSS problems when I want to put the author name below what he is saying

e.g.

Hello
(in small text: name of the person saying hello)

Who’s there?
(in small text: name of the person saying sth back)

Markup order alone will kill most uses of this element.

Comment by El tag HTML5 dialog | aNieto2K at August 13th, 2009 at 9:43 am

[...] ejemplo basado en Twitter y sacado de html5Doctor permite visualizar como debería ser la portada de Twitter en HTML5. ← Short URL, plugin [...]

Comment by El tag HTML5 dialog : Blogografia at August 13th, 2009 at 10:02 am

[...] ejemplo basado en Twitter y sacado de html5Doctor permite visualizar como debería ser la portada de Twitter en [...]

Comment by Mike Robinson at August 13th, 2009 at 3:16 pm

Blimey! You guys sure have a lot to say

@John Holdun: True, but their story is still tragic!

@Arlo: The short answer is no, <dialog> is not suitable for comments. Long reasoning:

1. An article and its comments are not necessarily a dialogue. Many comments are likely to be simple statements that do not interact intimately with the contents of the article or other comments, thus initiating no conversation. Many articles are also unlikely to be for the purpose of generating discussion, but are written to make a point or document an experience. They are closer to a monologue than a dialogue. If they did provoke discussion, you can’t place the article within a <dialog> without losing the use of more appropriate tags like <article>.

2. If you consider comments with threading, you can’t nest dialogs within each other. The only two elements that can be immediate children of <dialog> are <dt> and <dd>. You can’t nest a dialog within those two either, since the extended conversation is not a name or something that the top of the thread stated. However, it would be acceptable if it was similar to the Twitter example, where I have removed the thread from everything else surrounding it (i.e. other unconnected tweets, or replies to other people’s replies).

The specification recommends articles for comments. You can read more about implementing this as part of Bruce’s “Designing a blog with html5” article.

@ysbreker & Bastien: As Bastien said, <dl> has now been redefined as an association list. We’ll cover this further on HTML5Doctor at some point in the future. Within <dialog> , <dt> and <dd> are interpreted as “name of speaker” and “discourse” (or “quote”). If it helps you can think of <dt> and <dd> as “Dialog Talker” and “Dialog Discourse”, respectively.

@Bruce Lawson: I agree, <blockquote> and <cite> would be more appropriate had <cite> not been redefined. That is a very interesting article on the subject, one that anyone else reading this article should take a look at.

@Rachel Nabors: That’s the spirit!

@Florent V. (Wow, That’s quite the response!) and Steven Rossi: As Bruce said, before it was redefined it would have been acceptable to use <blockquote> and <cite> to mark-up dialogue. I think the <dialog> tag would have been a useful addition for grouping those two elements, and even though that is not the case the current state is quite similar. Most likely, the use of <dt> and <dd> within <dialog> is for backwards compatibility, since people were previously recommended to use <dl>. I agree with Florent’s comments on <dl>, there are many use cases that <dl> suits but really should have their own element like dialogue has received. I would like to revisit <dl> in an article here, so I’ll keep what you have said in mind and hopefully see you there for more on this

@John Faulds: Aren’t most terms in HTML/CSS in concession to US user (For example, color)? A number of different names were reviewed and I believe the reasoning for not using dialogue was because it might be too confusing.

@Wolf: Ignoring the concept of separating content from presentation, you are right that this can cause problems (though, perhaps not in saying that *most* uses are affected. I would say that most IM applications present the name first, then the discourse). Do you think it would be better if it was up to the developer to pick an order, provided all other tags within the <dialog> followed the same ordering (all dt before dd, or all dd before dt)?

Comment by Stephane at September 2nd, 2009 at 7:47 pm

I was thinking of using <dialog> to markup a Q and A, wondering if it would be a good idea.

Comment by bruce at September 2nd, 2009 at 8:14 pm

Yes, it would be entirely appropriate for Q&A

Comment by A squirrel has turned me into a cartoon : akamike at September 22nd, 2009 at 9:39 am

[...] comic is in response to the recent removal of, and failed alternative solution to, dialog. I wrote about dialog on HTML5Doctor not too long before this change, and was not best pleased by the replacement. Now, [...]

Comment by » Making a case for the dialog element in HTML 5 | The Pink Crow at September 25th, 2009 at 10:59 pm

[...] this was the suggestion for how to use <dialog>: <dialog> <dt>Brenda</dt> <dd>I love Coco Wheats!</dd> [...]

Comment by davux at December 28th, 2009 at 10:36 am

When it comes to styling <dialog/> (or a <dl/>, actually), it’s a problem that the only association between an author and what they say is the order. This prevents e.g. each intervention to be enclosed in a box. I think the idea of markup languages is to associate elements by enclosing them in a common container element, not by relying on them being siblings.

One (semantically and practically) sensible way of describing a dialog would be something like:
<dialog>
<turn>
<author>Bob</author><discourse>Hi</discourse>
</turn>
<turn>
<author>Mary</author><discourse>Hello Bob.</discourse>
</turn>
…
</dialog>

Comment by Clamcake Jones at January 4th, 2010 at 1:30 pm

What to do with threaded conversations? Google Wave or any bulletin board (bb) / forum software, out of the box, provides threaded conversations. Were threaded conversations not anticipated? They have been a mainstay of out of the box bb / forum software since before 2004.

HTML5 seems to be very publisher centric with it’s “article”, “sections”, and “aside” tags. It does not appear to have fully thought through an actual human interaction with the “article” or the other humans and their interactions.

With HTML5, Is there any means for keeping track of an entire conversation and it’s divergences (threads)?

http://en.wikipedia.org/wiki/Comparison_of_Internet_forum_software

Comment by Comment utiliser les listes de définitions ? | Les intégristes at January 7th, 2010 at 10:58 am

[...] de définitions ne doivent pas servir à mettre en forme un dialogue, puisqu’initialement la balise : <dialog> devait servir à cet effet. Cette balise ayant été retirée en septembre dernier sans être (encore ?) remplacée. On reste [...]

Comment by jethro larson at March 11th, 2010 at 7:35 pm

dialog to a user interface developer does not mean discourse, but an input window often floating above the main UI layer [1] . Web developers are not English majors so we don’t tend to think of things in literary terms. And literary people would use “dialogue” because they’re not dunces. The current spec of dialog will cause a lot of misuse of this element. I would recommend changing it to “dialogue” or something entirely different.

Now a dialog box element would be useful since they’re pretty common on the web right now. It would be similar to section in allowing header/footer. It would be hidden by default, except when the target of a link, similar to how the “details”[2] element is supposed to work.

[1]: http://en.wikipedia.org/wiki/Dialog_box
[2]: http://html5doctor.com/dd-details-wrong-again/

Comment by Cole Henley at June 14th, 2010 at 11:31 pm

For purpose of completeness – in case anyone missed the memo – the dialog element was dropped from the HTML5 spec in the latest draft

Comment by Adam Boarman's dot com » Blog Archive » The dl element at June 24th, 2010 at 9:11 am

[...] you’re not describing the speaker, but rather stating what they said. With the demise of <dialog>, conversations have no specific markup element. Instead, the specification makes recommendations of [...]

HTML5 Doctor

helping you implement HTML5 today