Markup Musings #1: How should you mark up dialog?

Semantic markup. Almost every developer who understands the concept, agrees with it, so why are so many people (myself included) often having trouble applying the principles?

While no doubt sometimes it’s garden-variety laziness, I know that personally there have been times that I’ve wanted to make the right decision but ended up scratching my head. While the HTML standards have done a fairly decent job of mimicking the basic forms and structures we all understand from traditional books (i.e. pages, paragraphs, headings, tables and lists), more and more often I’m finding myself faced with marking up a document that doesn’t fit so neatly into those structures — for instance restaurant menus, screenplays and comic strips. Each has a well-established format that doesn’t necessarily transfer seamlessly to the web.

While I can’t say I have the definitive answers to all these questions, I think it’s useful to at least throw the question out there and get a few alternative views — myself included.

Marking up dialog is the first conundrum we’ll look at.

Casablanca screenplay - page 126Let’s start with a piece from a classic — what is the most sensible way to go about marking up the final page from the screenplay from ‘Casablanca‘ for the web?

At a glance it seems to be more than a standard series of paragraphs (<p>). It has units in a very specific order, but it’s certainly not an ordered list (<ol>). Structurally it looks very much like a definition list (<dl>) — a list of items, each with an attached block of text. How do quote (<q>) and blockquotes (<blockquote>) fit into it all?

Luckily, in this case we’re not the first to ask this very question and there has already been a significant discussion on dialog mark up in the Accessify Forums which we can draw on. Brothercake, Andrew K, Kev and I have tossed around the options and this is where we ended up.

The simplest approach would no doubt to be mark up the whole thing as simple series of paragraphs with a few spans tossed in to indicate the speaker. While this might not be indefensible, it isn’t embedding much useful information in the document either.

Another approach suggested by some has been the use of a definition list (<dl>). However, while definition lists are a very close visual fit, they are a very clear semantic no-no in this case. Arguing that each speaker is a definition type (<dt>) and that each attached passage of text is a ‘definition description’ (<dd>) is hard to sustain.

Interestingly, there is currently a proposal for a <dialog> tag in HTML5 to be based on the current structure of <dl>. I’m not really convinced that’s the right approach either.

Since in theory each block of dialog is quoted speech, <blockquote>s seem to be a meaningful structure to sink each dialog snippet into. Additionally blockquotes also allows us to embed both block-level and inline elements within them, giving us a flexible base to work with. In fact, the W3C recommends that text within a blockquote should always be contained with a block element.

So, we start with something like:


<blockquote>
<p>Louie, I think this is the beginning of a beautiful friendship</p>
</blockquote>

As there will always be a limited number of speakers, I think it makes some sense to create a class for each speaker, and attach that class to each blockquote. We’re not forced to make use of it, but it gives us the ‘hooks’ to do more useful things at a later date — for instance, highlighting, emphasizing, hiding or coloring the dialog of particular characters.


<blockquote class="rick">
<p>Louie, I think this is the beginning of a beautiful friendship</p>
</blockquote>

According to W3.org the <cite> tag ‘contains a citation or a reference to other sources‘. In our case, we’re attributing each passage to a speaker, so it makes sense to use the <cite> tag to indicate who is speaking. For clarity I’ve also given it a ‘speaker’ class, but this would be very much optional.

So, now we have something like:


<blockquote class="rick">
<cite class="speaker">Rick</cite>
<p>Louie, I think this is the beginning of a beautiful friendship</p>
</blockquote>

Finally, stage directions are another element common to almost all scripts. As these are written in a more traditional, descriptive format, they are perfectly suited to plain old paragraph. If you expected to have other kinds of paragraphs in the same document — for instance, credits, a preface or other notes — you might chose to identify your stage directions with a class specific to them. If not, plain paragraph tags would suffice.


<blockquote class="rick">
<cite class="speaker">Rick</cite>
<p>Louie, I think this is the beginning of a beautiful friendship</p>
</blockquote>

<p  class="directions">The two walk off together into the night.</p>
<p  class="directions">FADE OUT.</p>
<p  class="directions">THE END</p>

Here’s a visual representation of that same structural mark-up super-imposed over the original page.

A Visual representation of the markup super-imposed over the original Casablanca script

So, what’s your verdict?

Can you see a better approach?

Are there other document format that you’ve had trouble translating to the web?

P.S. Remember to ‘escape’ your code if you’re posting HTML snippets (i.e < becomes &lt;)

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.saumendra.com Saumendra Swain

    Hey Alex, This is really cool. I think the use of Class, and utilizing the existing markup, in a smart way like You had explained, is the best. Even though the “blockquotes” and “cite” tag purpose is little bit upgraded, I would go with the way you discovered.

    Thanks for the insight.

  • http://autisticcuckoo.net/ AutisticCuckoo

    I think this approach suffers from acute temporal confusion. :)

    BLOCKQUOTE, Q and CITE are for quoting and citing existing resources, in my opinion. They refer to things that have already been said or written, not to things that will be said.

    The semantic definition of DL has been relaxed by the W3C to the point where it can now mark up several types of key/value pairs. The HTML 4.01 specification explicitly mentions dialogue as an allowed use for definition lists:

    Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

  • Tyssen

    It’s a bit unfortunate that ‘semantically’, the term ‘definition list’ doesn’t actually its permitted use according to the HTML spec.

  • http://www.sitepoint.com AlexW

    The semantic definition of DL has been relaxed by the W3C to the point where it can now mark up several types of key/value pairs. The HTML 4.01 specification explicitly mentions dialogue as an allowed use for definition lists:

    When was that relaxation recommendation made, Tommy? I hadn’t read anything along those lines.

    If people are using DLs for screenplays, is a tool like Google’s DEFINE: function going to end up full of screenplay passages?

  • Andrew Rickmann

    Although blockquotes seem like a fine idea I would be tempted to include the blockquotes within an ordered list.

    Each person is speaking in order, therefore neither an unordered list nor a definition list would be appropriate.

  • http://www.sitepoint.com/ Kevin Yank

    Andrew,

    We discussed that here as well. But by your logic, every document would be an ordered list, because paragraphs occur one after the other, in a defined order!

    Let’s not go list-crazy, I say. Save list tags for occasions where list semantics are significant within the document, not just when things happen to be list-like.

  • stardustwd

    Looks good to me but there is a couple of things I would like to mention.

    1) Cite is a valid attribute for a blockquote tag. Wouldn’t it be more semantic to use this instead of the class?
    2) Not sure about this one but should the <cite> tag be in the blockquote tag? I would think it better to place it outside of the blockquote tag, as it’s not actually part of the quote.

    Maybe I’m missing something though ;) Good job btw, things like this should be defined.

  • sebduggan

    The data I was trying to mark up the other day was an Organisational chart.

    It’s a simple organisation:

    The Executive Board, headed by a chairman, with a treasurer and secretary below him;

    and then the rest of the board, consisting of 8 members, all at the same level in the organisation, and below the Executive board.

    Any ideas?

  • Anonymous

    Heres what I see…..

    PAGE
    ***Page No
    ***Page Content
    —Dialog
    …Title
    …Body
    —Description
    …Paragraph
    …Paragraph
    …Paragraph
    —Dialog
    …Title
    …Body
    —Description
    …Paragraph
    …Paragraph
    —Footer

    The page is made up of Page no and Page content.

    Page content is made up of Dialog, description, Dialog, Description, footer.

    Dialog is made up of a title and body.
    Description is made up of paragraphs.

  • http://www.localref.com sjerguy

    Sorry, This is a little better

    Heres what I see…..

    PAGE
    ***Page No
    ***Page Content
    ******—Dialog
    *********…Title
    *********…Body
    ******—Description
    *********…Paragraph
    *********…Paragraph
    *********…Paragraph
    ******—Dialog
    *********…Title
    *********…Body
    ******—Description
    *********…Paragraph
    *********…Paragraph
    ******—Footer

    The page is made up of Page no and Page content.

    Page content is made up of Dialog, description, Dialog, Description, footer.

    Dialog is made up of a title and body.
    Description is made up of paragraphs.

  • http://autisticcuckoo.net/ AutisticCuckoo

    When was that relaxation recommendation made, Tommy? I hadn’t read anything along those lines.

    It’s in the spec: http://www.w3.org/TR/html401/struct/lists.html#edef-DL
    I can’t say for sure when that paragraph was added, but it was long ago.

    Your concerns about Google’s DEFINE function is probably well-founded, though. That’s the risk you take when you change the semantics of existing element types (something I recently wrote about on my blog, BTW).

  • Rick O

    I like the direction you’re going, but this part seems a little hackish to me:

    <blockquote class=”rick”><cite class=”speaker”>Rick</cite>

    That is, if the text of the <cite> is always equivalent to the class of the <blockquote>, then you’re duplicating data. I understand why you’re doing it, I’m just playing Devil’s Semantic Advocate.

    To do any sort of interesting formatting without the class would require either a CSS parent combinator (which doesn’t exist) or switching to a sibling-based structure, such as a <dl> (which is suboptimal).

  • tthomas48

    I’d be interested in the answer to this. I use wikipedia to write plays, and have some custom plugins. The wiki markup looks like this:

     
    <act>Act 1</act>
    <scene>Outside</scene>
    <c>Cynthia</c>
    Hi, thanks for coming out today. My name's Cynthia.</code>
    
    

    Then I’ve got some mediawiki plugins that translate it to:

     
    <div class="act">Act 1</div>
    <div class="scene">Outside</div>
    <div class="character">Cynthia</div>
    <p>Hi, thanks for coming out today. My name's Cynthia.</p>
    
    
  • http://www.sitepoint.com AlexW

    tthomas48, that method certainly keeps things pretty clean, but semantically speaking shouldn’t an ‘act 1′ div wrap everything within that act. And then the text ‘Act 1′ would be a heading.

    Something Like:

    
    < div class="act" >< h1 >Act 1< /h1 >
       < div class="scene" >< h2 >Outside< /h2 >
          < div class="character" >Cynthia
             < p >Hi, thanks for coming out today. My name's Cynthia.</p>
         </div>
       </div>
    </div >
    
  • http://www.sitepoint.com AlexW

    The data I was trying to mark up the other day was an Organisational chart.

    Any ideas?

    That’s a curly one, but I’ll have a think about that. I’d like to do a series of these so I’ll post it if I can.

  • http://www.brothercake.com/ brothercake

    The cite attribute of a blockquote must be a URI that points to the source of the quotation. However the <cite> element is far more flexible, as it can contain any reference to an external source, person etc.

  • mlcd
  • edeverett

    Why isn’t the dialog best represented in simple table? That would seem to represent the relationships present in the information:

    <table>
    <tr>
    <th>Speaker</th><th>Dialog</th>
    </tr>
    <tr>
    <td>Name</td><td> Lorem ipsum</td>
    </tr>

    </table>

  • edeverett

    Just to expand on my last post a little:

    In Alex’s original suggestion there are several peices of repeated markup that seem to me to be fixes problems that would be naturally solved by using table markup. Having the speakers name repeated twice in the markup seems like a hack, and would make for harder to maintain/write code – this would not be needed using a table. Also having to declare the purpose of each peice of information every time something is said seems similarly like code bloat – use a table and you only have to declare what each type of information is once (in the column header).

    This is surely a situation where tables (for once) provide cleaner and easier to read markup.

  • http://www.ethical-junction.org/ethicalpulse/ spiritquest

    This is surely a situation where tables (for once) provide cleaner and easier to read markup.

    Unfortunately a table has no semantic meaning to it, and dialog in itself is not tabular data.

    I think as has been mentioned earlier seems to be the way forward. But then seeing the HTML 4.01 spec, I think this makes more sense. As a majority of the document is quoted, The key here is that the character is speaking and the their quote is tied directly to them.

    I struggled with this a while back in a blog posting I had to convert for someone, there was plenty of dialog, and I must admit I scratched my head a few times.

    It looks like this may be an option:

    
    <div id="act4">
    <dl class="dialog">
        <dt class="speaker">Rick</dt>
        <dd class="rick"><q>Louie, I think this is the beginning of a beautiful friendship</q></dd>
    </dl>
    <p class="directions">The two walk off together into the night.</p> 
    <p class="directions">FADE OUT.</p> 
    <p class="directions">THE END</p>
    </div>
    

    I presume if there was a stream of dialog it would stay within on

    block, until a direction would break that stream of dialog.

    I think if the HTML 4.01 specs saw usage for this within the specifications, the next best step would be to add semantic class meanings and possibly come up with a sensible stylesheet. Nuances such as id’s for acts and the ability to highlight speakers would be possible if all the actual quoted dialog had a class name similar to the cited character.

    I think there are subtleties here that could make it semantically useful and through css offer flexibility on how the script is interpreted when rendered.