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:

A little more conversation with dialog originally appeared on HTML5 Doctor on August 12, 2009.