19

我正在开发一个实现 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 />似乎也不合适。

我是否过度思考语义标记的事情：最好将其粘贴到 a 中<div />而不用担心它？

4

2 回答 2

24

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" 更适合 afooter而不是 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>
于 2012-09-29T00:34:18.893 回答
9

您可以将其<section>作为. 但是，如果您使用的是 Disqus，我猜您使用的任何元素都无关紧要。我认为它不属于文章内容。也许一个代替？<div><section><article><aside>

请记住，在语义方面，没有任何硬性规定。只要您的文档以有意义的方式进行结构化和概述，这才是最重要的。

于 2012-09-28T16:15:26.330 回答