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.
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 (
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
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
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
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>
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.
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!