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

Question

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

这是一个例子<article />(本身在a中<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>

有了上面的结构,我不确定在哪里整合文章的评论.

• A <footer />显然不合适("页脚元素不是分段内容;它不会引入新的部分.")
• Disqus使用异步JavaScript来创建一个<iframe />包含注释小部件,所以a <p />似乎也不合适.

我是否过度思考语义标记的事情:最好只是坚持下去<div />而不担心它？

Answer 1

HTML5规范中有一个带有注释的博客文章的示例.在我看来,这是有道理的.

您的示例可能如下所示:

  <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代替a 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>).但是如果你使用Disqus,我想无论你使用哪个元素都没关系.我不认为它属于文章内容.也许反而？<section><article><aside>

请记住,在语义方面,没有任何硬性规定.只要您的文档以有意义的方式结构化和概述,那就是重要的.