Best semantics for translations with notes

Question

I want to offer translations for lyrics, book excerpts and more. The result should look like this:

original text part 1 (for example a paragraph)
translated text part 1
notes on part 1

original text part 2
translated text part 2
notes on part 2

So far I'd do the basic mark-up as proposed here Semantically marking up translations.

<section>
<blockquote lang="en">
  original text part 1
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
<blockquote lang="de">
  translated text part 1
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
<p>notes on part 1</p>
</section>

<section>
<blockquote lang="en">
  original text part 2
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
<blockquote lang="de">
  translated text part 2
  <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
<p>notes on part 2</p>
</section>

Is there a better way to do it or is this the best we can do at the moment?

What I'm especially interested in is if there's a way to elegantly mark all the parts as belonging to the same source without repeating it for each paragraph.

Sources would be attributed as shown here http://html5doctor.com/blockquote-q-cite/ (search for "OMG a heading!", the relevant part starts right after that).

Answer 1

You could use the table element:

<table>
  <tr>
    <th>Original/English</th>
    <th>Translation/German</th>
  </tr>
  <tr>
    <td><blockquote><p>A wizard is never late… nor is he early.</p></blockquote></td>
    <td lang="de"><p>Ein Zauberer kommt nie zu spät … ebensowenig zu früh.</p></td>
  </tr>
</table>

<p class="note">Gandalf said this in …</p>

By using a table, you explicitly state that these two snippets are in relation to each other.

Additional translations could be added easily.

I assume that the whole page is in English (e.g. lang="en" on html); if not, you should set lang="en" on the td containing the English original.

As you can see, I used blockquote for the original (English) content only, assuming that you are translating the content yourself. If that's true, you aren't quoting anything, and so you shouldn't use blockquote for the translation. If however you are taking the translations from another source, you should use blockquote for it, too.

What "container" to use? It depends on the whole page structure / context. You'd probably want to use section for each group (consisting of the original text, the translation and the notes), if there would be a natural heading.

You could also use one table for all groups, e.g.:

<table>
  <tr>
    <th>Original/English</th>
    <th>Translation/German</th>
    <th>Notes</th>
  </tr>
  <tr>
    <td><blockquote><p>A wizard is never late… nor is he early.</p></blockquote></td>
    <td lang="de"><p>Ein Zauberer kommt nie zu spät … ebensowenig zu früh.</p></td>
    <td><p>Gandalf said this in …</p></td>
  </tr>
  <tr>
    <td><blockquote><p>…</p></blockquote></td>
    <td lang="de"><p>…</p></td>
    <td><p>…</p></td>
  </tr>
</table>

(An additional "header column" could give a title/description for each row.)

It really depends on the actual page.

Answer 2

Maybe something like this would work for you?

<blockquote>
    <blockquote> This is a blockquote</blockquote>
    <blockquote> This is another blockquote</blockquote>
    <footer>- Test</footer>
</blockquote>