使用
HTML5,放置< article> < li>内的元素元件.这将证明有用的情况是博客上最近或热门文章的列表.考虑以下几点：
<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>
这将显示如下：
解决方法
没有任何语义上的错误,但并不是真的有必要. < ul>和< li>元素不是真的在这里添加任何东西,除非您利用其默认样式.简单地把< article>标签直接位于< section id =“popular”>应该是足够的,它降低了页面的复杂性以及它的大小.
要确定某些内容在HTML中是否具有语义正确性和实用性,请问自己几个问题.您是否按照预定目的使用每个元素？例如,如果您使用< a>按钮的元素,< a>是用于超链接,< button>是按钮.您是否需要您正在使用的每个元素才能传达关于您的内容的所有语义信息(部分,标题,链接等)？有意义的是,您打算传达哪些不是通过使用适当的元素来表达？有许多额外的无意义的元素通常是没有害处的,但它会增加混乱,这可能意味着你有视觉上而不是编码的语义区别,屏幕阅读器或自动机器人或浏览器将信息呈现在一种不同的格式可能会有意义.
