I'm posting some extremely long audio transcripts from 50 minute long radio recordings. I'm afraid that any search engine crawler will read these really long documents and treat it negatively because of keyword frequency or length.

I've researched and found that for a dialogue a <dl> <dt></dt> <dd></dd> </dl> is recommended from http://www.sitepoint.com/markup-musings.., but it doesn't provide me the right formatting so I've used a <table> instead. I'm wondering if there are any attributes or specific mark up I can use to help inform a browser that what it is looking at is a transcript of a recording?

My code basically looks like this, with no attributes describing the information. Any suggestions are welcome!

<table width="100%" border="0" id="blogposttable">
        <col width="17%">
        <col width="83%">
    <tbody valign="top">
        <tr id"#speakerName">
            <td>Speaker name:</td>
            <td>What they said.</td>
        </tr> <!-- many more rows and columns following -->

HTML5 (CR) has an own section about conversations (e.g., for "dialogues in screenplays").

They recommend to use

  • p and punctuation
  • span/b for the speaker name (if a hook is needed for styling purposes)
    (but see my comment below regarding cite)
  • i for stage directions

Simple example:

   <p><span>Alice</span>: How are you?</p>
   <p><span>Bob</span>: Good.</p>
   <p><i>Carol enters the room.</i></p>

I think you could use the cite element for the speaker name instead. It was once explicitly not appropriate to use it for person names, but the spec changed.

   <p><cite>Alice</cite>: How are you?</p>
   <p><cite>Bob</cite>: Good.</p>

If you quote the content of your transcript, you should use q/blockquote. But I wouldn’t use quotation elements if the transcript is provided on the same site resp. by the same publisher, and it’s serving as alternative to the audio.

I've researched and found that for a dialogue a <dl> <dt></dt> <dd></dd> </dl> is recommended […]

In HTML5, the dl element should not be used, as it’s "inappropriate for marking up dialogue".

Note that the above linked section about conversations shows an example using dl, but this example is not for a dialogue but for a graph of interactive conversations, listing possible responses.

| improve this answer | |
  • Excellent. Thank you for sharing your knowledge. Do you think that it would still be appropriate to use a table to format it? – Incredulous Apr 4 '14 at 13:38
  • @Incredulous: I don’t think it’s really appropriate, at least not in the case of only the two columns name and text (it might make sense if there are more "metadata" columns, like time, intonation, category, etc., e.g. when users need to compare/sort rows/values). However, I wouldn’t say it’s an error to use table in your case either, it’s just that personally I wouldn’t use it. – unor Apr 4 '14 at 14:15
  • Thanks. I'm going to do some testing to see if I can get my desired result using your suggestion of <p> with <span> since I do prefer to have a 2 column format. – Incredulous Apr 4 '14 at 14:57

For your specific situation, I would recommend:

  1. Using a th element for the speaker name, as that makes more sense in the table context.
  2. Wrapping the spoken content in a blockquote element. For example, <td><blockquote>What they said.</blockquote></td>

However I feel like there must be a way to achieve the design you want using the dl tag. You can float dt and dd tags to the left and that would gain you the same text layout. The only difference would be making equal height columns that you get for free with tables.

It appears to be invalid to wrap each dt/dd pair in another tag, eg <dl><div><dt>Announcer</dt><dd>Speech</dd></div></dl>. If you did that you could easily use display: table and the like in CSS.

| improve this answer | |
  • How does a search engine crawler look at data inside a <blockquote> as opposed to a <p>? – Incredulous Apr 3 '14 at 14:15
  • There shouldn't be any difference, most tags used for general content make no difference to SEO (besides some special cases like headings). – DisgruntledGoat Apr 3 '14 at 16:42
  • It is invalid to wrap a <div> around a <dt>, but I can give the <dt> properties with css anyways. I think that the <dt> will break down much more nicely when using media queries with a responsive layout than a table would. – Incredulous Apr 3 '14 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.