在列表/概述中使用语义 HTML 标签
我最近刚刚开始学习语义 HTML 标签，当我想概述整个网站或只是内容列表时，我对何时使用部分或文章有点困惑。
例如，您将如何使用语义标签构建这样的内容。该列表中的每个项目都有自己的页面，并在主导航栏中有一个链接。每个页面都会包含几篇博客文章。
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
这是最佳实践还是我应该将每个
预先感谢您帮助解释这一点。
I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.
For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?
Thank you in advance for help explaining this.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您想在此代码中使用语义
标记，您可以将& 包装起来。标签与包装> 标记，它不会按您的预期工作。If you want to make use of semantic
<article>tag in this code, you can wrap your<h3>&<p>tag with<article>tag instead of wrapping<li>with<article>tag, and it won't work as you expected.这一切对我来说看起来都不错。
当您有不同的主题或不同的内容要突出显示时，
最适合用来划分页面。举例来说，您有一个主页，顶部有一般摘要，下方有联系表单，下方有号召性用语。您可能需要为此使用三个部分。但是，对于语义...部分是通用的，可能有一个标签更适合并且更具体地适合您显示的信息（请参阅下面的链接）。非常适合用作每篇博客文章实际文本的包装。将此视为突出显示单独组成或独特的信息。新闻文章、评论等信息：https://css-tricks.com /如何划分您的html/
That all looks pretty good to me.
<section>is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).<article>would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.Info : https://css-tricks.com/how-to-section-your-html/