我应该在哪个元素中包含 <article /> 的注释？

问题描述 投票：0回答：3

我正在开发一个实现 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>

通过上述结构，我在语义上不确定在哪里整合文章的评论。

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

我是否过度考虑了语义标记的事情：最好将其粘贴到 

<div />
中而不用担心它？

html semantic-markup
3个回答
25
投票

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
而不是
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>
9
投票

您可以将其粘贴在您的容器 

<section>
中自己的 
<div>
（而不是 
<section>
）中，作为您的 
<article>
的兄弟。但如果您使用 Disqus，我想您使用哪个元素并不重要。但我认为它不属于文章内容。也许可以用 
<aside>
代替？

请记住，当涉及到语义时，没有任何硬性规定。只要您的文档以有意义的方式构建和概述，那就很重要。

0
投票

我的偏好：

<body>
  <main>
    <article>
      "tweet" or "article" or "blog post" or "forum post" content goes here...
      <section class="comments">
        <h1>Comments</h1>
        <ol>
          <li>
            <div class="comment">
              comment goes here...  
            </div>
          </li>
          <li>    
            <div class="comment">
              comment goes here
            </div>
          </li>
          ....... more comments
        </ol>
      </section>
    </article>      
  </main>
</body>

我认为评论是文章的一部分，因为它们与具体文章密切相关。因此，我在article元素内和section元素内留下了评论以对它们进行分组。如果我将每个评论包含在文章元素中，则意味着每个评论都可以独立分发并且仍然是独立的，这是不可能的，因为每个评论都与文章的主题相关。所以我决定将每个评论包含在 div 中。

因此，给定的 HTML 结构根据语义意义进行最佳对齐。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.