我应该使用<ol>、<ul>、<article>还是<blockquote>来使用语义超文本标记语言的评论列表？
我应该使用<ol>、<ul>、<article>还是<blockquote>来使用语义超文本标记语言的评论列表？
提问于 2018-07-11 07:29:45
我做了一些研究，但没有找到合适的答案。我想知道是继续使用li元素作为评论列表还是切换到文章元素更好？
示例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>回答 1
Stack Overflow用户
发布于 2018-07-12 02:55:53
每条评论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)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51275226
复制相关文章
相似问题