我应该使用<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>

Answer 1

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

关于w3schools中的blockquote：

  

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

我想说“引自其他来源”实际上不适用于评论。

关于w3schools中的article：

  

<article>标签指定独立的，独立的内容。   文章应该是有意义的，应该可以独立于网站的其余部分进行分发。

所有这些要点都可能适用于您的评论，所以我建议您使用<article>。

Answer 2

编辑

好，这是血腥细节 EMPHASIS是我的

<figure>和<figcaption>

  

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

     

...

     

标题可以与<figure>元素相关联，方法是在其中插入<figcaption>（作为第一个或最后一个子元素）

<figure> - MDN

我看到的是作者的图像。 如果 是出于上下文（流程）的背景，它仍然是作者的图像吗？是的。怎么样？因为它的最后一个子项带有<figcaption>标记，而其文本则具有作者的名字。

---

<header>

  

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

     

...

     

该元素为不分节内容，因此不在大纲中引入新节。

<header> - MDN

在<h1-h6>中将<nav>或<header>换行，如果是<nav>，则在<main>之外，如果在<main>内，则用于标题（<h1-h6>）。 请勿在{{1​​}}周围包裹<header>。 <figure>是专业内容包装器，不是内容。 <figure>是专业内容包装器。

---

<header>和<article>

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

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

---

即使有两个版本的HTML5标签定义（W3C和WHATWG），应用于HTML5布局的语义也是主观的。您的页面将与<section>和<div>一起正常运行（例如：Bootstrap。）

<span>在<article>

文章可以独立存在，并且可以承载主题的流程，可以按<blockquote>将其划分为子主题，其中的文本和媒体内容可以分为<section>，{{1} }等

要将所有内容包装在一个整齐的包中，<p>和外围设备将是<figure>和<main>，它们通常包含大多数页面（例如{ {1}}或<header>，支持链接等。

<footer>是对作品（例如书，诗，演讲等）的扩展重申。因此不适合发表评论。

关于列出每个评论，我会跳过这一点，因为<nav>会独立存在。

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

演示

<address>

Answer 3

每个评论should都是article（no matter，无论您是否使用列表）。这些article元素可以是section（representing the comment area）的一部分，而此section应该是注释所针对的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>

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

<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之后）反对

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