带注释翻译的最佳语义

我想提供歌词、书籍摘录等的翻译。结果应该是这样的：

原文第 1 部分（例如一段）
翻译文本第 1 部分
第 1 部分的注释

原文第2部分
翻译文本第 2 部分
第 2 部分的注释

到目前为止，我会按照此处的建议进行基本标记对翻译进行语义标记 https://stackoverflow.com/questions/7229085/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>

有没有更好的方法来做到这一点，或者这是我们目前能做的最好的方法？

我特别感兴趣的是，是否有一种方法可以优雅地将所有部分标记为属于同一来源，而无需在每个段落中重复它。

来源的归属如下所示http://html5doctor.com/blockquote-q-cite/ http://html5doctor.com/blockquote-q-cite/（搜索“天哪，标题！”，相关部分紧随其后开始）。

你可以使用table element http://www.w3.org/TR/html5/tabular-data.html#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>

通过使用table，您明确指出这两个片段彼此相关。

可以轻松添加其他翻译。

我假设整个页面都是英文的（例如lang="en" on html）；如果没有，你应该设置lang="en" on the td包含英文原版。

正如你所看到的，我用了blockquote仅适用于原始（英文）内容，假设您自己翻译内容。如果这是真的，那么您没有引用任何内容，因此您不应该使用blockquote用于翻译。但是，如果您从其他来源获取翻译，则应该使用blockquote也为了它。

使用什么“容器”？这取决于整个页面结构/上下文。你可能想使用section对于每个组（由原文、译文和注释组成），是否有一个自然标题。

你也可以使用one table对于所有组，例如：

<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>

（附加的“标题列”可以为每行提供标题/描述。）

这实际上取决于实际页面。