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>

Answer 2

您可以将<section>作为<div>的兄弟{@ 1}}（而不是<section>）添加到自己的<article>内。但是如果你使用Disqus，我想无论你使用哪个元素都没关系。我不认为它属于文章内容。也许改为<aside>？

请记住，在语义方面，没有任何严格的规则。只要您的文档以有意义的方式进行结构化和概述，那就是最重要的。

我应该在哪个元素中附上<article>的评论？</article>

2 个答案: