将嵌套在语义上是否正确？内的元素元素？
使用 HTML5，将
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
如下所示：
热门文章
我的博客中最受欢迎的帖子。
文章
文章摘录。
文章
文章摘录。
文章
文章摘录。
对我来说，这似乎是标记信息的绝佳方式。我唯一的问题是，以这种方式将
using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
Which would appear as follows:
Popular Articles
The most popular posts from my blog.
Article
An excerpt from the article.
Article
An excerpt from the article.
Article
An excerpt from the article.
To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
它在语义上没有任何错误，但实际上没有必要。
和元素实际上并没有在此处添加任何内容，除非您利用它们的默认样式。只需将标记直接放在中就足够了，它可以降低页面的复杂性它的大小。要确定 HTML 中的某些内容在语义上是否正确且有用，请问自己几个问题。您是否将每个元素用于其预期目的？例如，如果您对按钮使用
元素，那么在语义上就不正确，因为用于超链接，There is nothing semantically incorrect about it, but it is not really necessary. The
<ul>and<li>elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the<article>tags directly within the<section id="popular">should be sufficient, and it reduces the complexity of your page as well as its size.To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an
<a>element for a button, as<a>is for hyperlinks,<button>is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.如果它在所有实现中都正确显示，我不知道为什么它会不正确...... HTML5 意味着灵活。另外，文档指出：
这看起来是大多数可用元素的上下文。
If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:
Which looks to be the context of most elements available.