我应该使用<ol>，<ul>，<article>还是<blockquote>来列出评论使用语义化HTML？

Question

我做了一些研究，没有找到一个合适的答案。我想知道在评论列表中是更好继续使用li元素还是换成article元素？

例子1：

<ol class="comment-list">
  <li class="comment">
    <figure class="avatar">
      <img ... >
    </figure>
    <span class="author">Linus Torvalds</span>
    <p class="comment-text">
      Linux is awesome!
    </p>
  </li>
  ...
</ol>

例子2：

<div class="comment-list">
  <article class="comment">
    <header>
      <figure class="avatar">
        <img ... >
      </figure>
    </header>
    <span class="author">Linus Torvalds</span>
    <p class="comment-text">
      Linux is awesome!
    </p>
  </article>
  ...
</div>

什么是最佳解决方案？

更新 1

示例 3（更好的示例）：

<main>
  <article>

    <header>
      <h1>Text title</h1>
    </header>

    <p>The text...</p>

    <section class="comment-list">
      <article class="comment">
        <header>
          <figure class="avatar">
            <img ... >
          </figure>
        </header>
        <span class="author">Linus Torvalds</span>
        <p class="comment-text">
          Linux is awesome!
        </p>
      </article>
      <article class="comment">
        <header>
          <figure class="avatar">
            <img ... >
          </figure>
        </header>
        <span class="author">Richard Stallman</span>
        <p class="comment-text">
          GNU is awesome!
        </p>
      </article>
      ...
    </section>

  </article>
</main>

- Arthur Ronconi

Answer 1

如果你想提供比使用 ol/ul 更多的语义价值，那么在我看来，article 是最好的选择。

关于来自 w3schools 的 blockquote：

<blockquote> 标签指定引用自另一个来源的部分。

我认为“引用自另一个来源”并不适用于评论。

关于来自w3schools的 article：

<article> 标签指定独立、自包含的内容。 一篇文章应该能够独立地理解，并且可以将其与站点的其他部分分开发布。

所有这些观点可能都适用于你的评论，因此我建议使用 <article>。

- Simon Mathewson

---

是的！那么我应该使用<section>将<article>评论列表放在主要的<article>内部吗？（我在问题上添加了一个新的示例来说明）。 - Arthur Ronconi

我认为是这样的。另外，我怀疑 figure 是否适合评论者的头像（它是否真的是一个自包含的内容，作为评论其他部分的单个单位引用？）。而作者的名字可能应该与头像一起放在评论“标题”（“一组介绍性辅助工具”）中。 - Ilya Streltsyn

Answer 2

每个评论都应该是一个文章（无论是否使用列表）。这些文章元素可以是部分的一部分（代表评论区域），而这个部分应该是评论所属的文章的一部分（例如，博客文章）。

<article>
  <h2>My blog post</h2>
  <section>
    <h3>Comments</h3>
    <article id="comment-1"></article>
    <article id="comment-2"></article>
    <article id="comment-3"></article>
  </section>
</article>

如果您允许回复评论并显示嵌套的评论，则回复应作为父级评论的一部分：

<article>
  <h2>My blog post</h2>
  <section>
    <h3>Comments</h3>
    <article id="comment-1"></article>
    <article id="comment-2">
      <article id="comment-2-1"></article>
      <article id="comment-2-2"></article>
      <article id="comment-2-3"></article>
    </article>
    <article id="comment-3"></article>
  </section>
</article>

从语义上讲，在这里没有必要使用列表。由于使用了分区内容元素（section，article），评论部分和每个评论都是文档大纲的一部分，这可以允许快速的页面导航。
添加列表也不会有错，但在这种情况下我建议不要这样做（遵循我的两个经验法则）。

使用blockquote来评论是不合适的。这是它们的规范/原始位置，你不是在引用别处的内容。由于使用了article，你已经在语义上传达了里面的内容可能来自于比外部内容更多的作者（因为article允许你"范围" address元素和author链接类型）。

- unor

Answer 3

编辑

好的，下面是详细内容 重点在于我

<figure>和<figcaption>

通常，<figure>是一个图像、插图、图表、代码片段等，在文档的主要流程中被引用，但可以在不影响主要流程的情况下移动到文档的其他部分或附录中。

...

可以通过在<figure>元素内插入<figcaption>（作为第一个或最后一个子元素）来关联标题

<figure> - MDN

我看到的是作者的一张图片。如果它被从上下文（流）中取出来，那么它仍然是作者的图片吗？是的，它是。为什么？因为它有

标签作为其最后一个子元素，并且作者的名字作为它的文本。

---

<header>

HTML <header> 元素代表引导性内容，通常是一组引导或导航辅助信息。

...

<header> 元素不是分区内容，因此不会在大纲中引入新的章节。

<header> - MDN

将<h1-h6>或<nav>包装在<header>中，如果是<nav>，则它在<main>之外，在<main>之内，如果是标题（<h1-h6>）。 不要将<header>包装在<figure>周围。<figure>是一个专业的内容包装器，而不是内容。<header>是一个专业的内容包装器。

---

<article>和<section>

<article>和<section>可以相互嵌套，但要遵循一种模式。基本上，<article>可以是<article>或<section>的子主题，反之亦然。

参考：使用HTML节和大纲, <article>标签和<section>标签。

---

尽管HTML5标签定义有两个版本（W3C和WHATWG），但是对于HTML5布局的语义化是主观的。您的页面使用<div>和<span>同样可以正常工作（例如：Bootstrap）。

<article>优于<blockquote>

<article>可以独立存在，并承载一个主题的流程，该主题可以通过<section>分成子主题，在其中可以将文本和媒体内容分组为<p>、<figure>等。

将所有内容整理成一个整洁的包装，就是 <main>，而外围设备则是 <header> 和 <footer>，通常包含大多数页面共有的内容，如 <nav> 或 <address>，支持链接等。

<blockquote> 是对作品（例如书籍、诗歌、演讲等）的扩展重述。因此，它不适合用于评论。

至于列出每个评论，我会跳过，因为 <article> 可以独立存在。

在没有所有细节的情况下，我向您提交了我对语义布局的看法：

演示

<header>
  <nav></nav>
</header>
<main id='page11'>
  <article class="comment">
    <figure class="avatar">
      <img ...>
      <figcaption class="author">Linus Torvalds</figcaption>
    </figure>
    <section class='content'>
      <p class="comment-text">
        Linux is awesome!
      </p>
    </section>
  </article>
</main>
<footer>
  <address></address>
</footer>

- zer00ne