HTML5的section和article标签有啥区别？¶
H5提供了语义化的标签，正确使用它们可以提高html源码的可读性，对于SEO也有好处。有时候我们会混淆section和article，本文做个小结。
section标签¶
section没有固定的翻译，个人比较喜欢翻译为“组成部分”。section的特征是，它们不是独立的存在的，通常情况下，多个section会一起构成一个大的整体。
比如，我们可以把body拆分成4个section：top、left、main、footer，分别表示网页布局中的不同位置。
示例代码：
<body>
<section id="top">顶部导航栏</section>
<section id="left">左侧功能菜单</section>
<section id="main">右侧主要内容</section>
<section id="footer">底部版权信息</section>
</body>
article标签¶
article字面上的意思是“文章”，但实际应用范围更加广泛，不见得一定和“文章”有关系。
article的特点是，它们是独立的，互相之间没有关联。比如说，一个网页里有N个article，当删除其中任意一个时，其他article应该不受任何影响。另外，article通常用于重复的项目，比如博客的文章、论坛的帖子、电商网站的商品。
另外，article内部也可以划分成多个section，比如一个article可能由title、summary、content、author等section组成。
一个综合的例子¶
这个例子里同时使用了section和article，互相嵌套。body由多个section组成；id为main的section由若干article构成，而每个article又可以拆分为多个section。
<body>
<section id="top">顶部导航栏</section>
<section id="main">
<article>
<section class="title">标题1</section>
<section class="content">内容1</section>
</article>
<article>
<section class="title">标题2</section>
<section class="content">内容2</section>
</article>
</section>
</body>
本文为kyleblog.cn原创，转载请注明出处：https://www.kyleblog.cn/posts/section_vs_article
发布日期：2022-08-14 联系作者