html - 我应该在哪个元素中包含 的评论？

Question

我正在开发一个实现 Disqus 评论的博客，我正在努力尽可能多地使用 HTML5 语义标记。

这是一个示例 <article />(它本身在 <section /> 中)，非常简单:

  <article class="post">
    <header>
      <h2>Title</h2>
      <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- blog comments -->
  </article>

对于上述结构，我不确定在语义上将文章的评论整合到哪里。

• <footer /> 显然不合适(“页脚元素不是分段内容；它没有引入新的部分。”)
• Disqus 使用异步 JavaScript 创建一个 <iframe /> 来包含评论小部件，因此 <p /> 似乎也不合适。

我是不是对语义标记的事情想得太多了:最好只是将它粘贴到 <div /> 中而不用担心它吗？

Answer 1

有一个example in the HTML5 spec对于带有评论的博客文章。在我看来，这是有道理的。

您的示例可能如下所示:

  <article class="post">
    <header>
      <h1>Title</h1>
      <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>

---

旁注:我认为您的“posted-on”更适合 footer而不是 header .所以你的 header 可以省略，因为它只包含标题。所以你的例子看起来像:

  <article class="post">

    <h1>Title</h1>

    <footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer>

    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>