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

Question

我做了一些研究，但没有找到合适的答案。我\xe2\x80\x99m 想知道\xe2\x80\x99 是否最好继续使用 li 元素作为评论列表，或者切换到 Article 元素？

\n\n

示例1：

\n\n

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

\n\n

示例2：

\n\n

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

\n\n

最好的解决方案是什么？

\n\n

更新1

\n\n

示例 3（更好的示例）：

\n\n

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

\n

Answer 1

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

关于blockquotew3schools ：​

该<blockquote>标签指定从其他来源引用的部分。

我想说“从其他来源引用”并不真正适用于评论。

关于articlew3schools ：​

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

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