section和article的区别及使用场景

3,263 阅读1分钟

虽然使用section和article这两个语义化标签有一段时间了,但是其实对他们之间的联系及区别,以及各自的使用场景还是感到模糊的。所以现在在这做一个整理,方便以后查阅。


section

section 表示一段专题性的内容,通常会带有标题,如果没有标题,那么就不推荐使用section。

一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。要点:有主题性地分组,每个section对应不同的主题,注意是内容本身的主题,而不是其他人为设定的划分标准。

典型的应用场景有:文档大纲、文档章节、论文中有编号的部分。


article

article 是一个特殊的 section 标签,它比 section 具有更明确的语义,一般会有标题部分(通常包含在 header 内),有时也会包含 footer 。

当一段内容脱离了所在的语境之后,还是完整的、独立的,则应该用article。

典型的应用场景:论坛帖子,新闻或杂志的文章,博客文章,用户提交的评论。


总结

对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块,但是它只能算是组成整体的一部分,article 才是一个完整的整体。