我应该使用 <ol>、<ul>、<article> 或 <blockquote> 来使用语义 HTML 列出评论吗？

Question

我做了一些研究，但没有找到合适的答案。我想知道在 cmets 列表中继续使用 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>

Answer 1

如果您想提供比使用ol/ul 更多的语义价值，那么我认为article 将是最佳选择。

关于blockquote来自w3schools：

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

我会说“引用自其他来源”并不真正适用于 cmets。

关于article来自w3schools：

<article> 标签指定独立的、自包含的内容。 一篇文章本身应该是有意义的，并且应该可以独立于网站的其他部分进行分发。

所有这些要点可能都适用于您的 cmets，因此我建议您使用 <article>。

Answer 2

每条评论should 都是article（no matter，如果你会使用列表）。这些article 元素可以是section (representing the comment area) 的一部分，而这个section 应该是cmets 所针对的article 的一部分（例如，博客文章）。

<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>

如果您允许回复 cmets 并显示它们嵌套，回复应该是父评论的一部分：

<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），评论部分和每条评论都是文档大纲的一部分，可以实现快速的页面导航。
不过，添加列表并没有错，但我建议在这种情况下不要这样做（遵循my two rule of thumbs）

对 cme​​ts 使用 blockquote 是不合适的。这是他们的规范/原始位置，您没有从其他地方引用。感谢使用article，您已经在语义上传达了内部内容可能来自其他作者而不是外部内容（因为article 允许您使用"scope" the address element and the author link type）。

Answer 3

编辑

好的，这是血淋淋的细节 重点是我的

<figure> 和 <figcaption>

通常<figure>是图像、插图、图表、代码sn-p等，在文档的主要流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。

...

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

<figure> - MDN

我看到的是作者的形象。 如果是断章取义（flow），它还是作者的形象吗？是的。如何？因为它有<figcaption>标签作为它的最后一个孩子，作者的名字作为它的文本。

---

<header>

HTML 元素代表介绍性内容，通常是一组介绍性或导航帮助。

...

元素不分割内容，因此不会在大纲中引入新的部分。

<header> - MDN

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

---

<article> 和 <section>

<article> 和<section> 可以在任一方向上相互嵌套，但要坚持一个模式。基本上<article> 可以是<article> 或<section> 的子主题，反之亦然。

Refer to: Using HTML Sections and Outlines 、<article> tag 和 <section> tag。

---

尽管 HTML5 标记定义有 2 个版本（W3C 和 WHATWG），但应用于 HTML5 布局的语义是主观的。您的页面将与 <div> 和 <span> 一样正常运行（例如：Bootstrap。）

<article> 超过 <blockquote>

文章可以独立存在，承载一个话题流，可以通过<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>