深入浅出:article与section的区别

在H5中,标签往往不仅代表结构,同时也具备语义化:
在H5中,为了使文档的结构变得清晰明了,其中:article和section主体结构新增的出现看似,相似,实际是有区别的:

article:强调独立性、完整
代表文档、页面、应用程序中独立的且完整的,可独自被外部引用的内容
:一个完整的article元素通常要有自己的标题(大标题:header)和脚注,能用article就别用section

如:一篇博客、报刊文章、一篇论坛帖子、一段用户的评论等独立且完整的内容

section:强调分块、分段多结构式的内容展示
如:一篇演讲稿:分为演讲主题 开头语 中心思想表达内容 结语,分别分为一个一个的区块,这样就可以设置section增强语义,标注各自的小标题(小标题:h1~h6),形成结构化语义内容

语义转换变化:article和section可以相互嵌套使用:

如:完整评论:在整个评论外部设置article,用header标注一个大标题,评论区域有许多评论,可以使用section嵌套,表示内容结构区,单独的用户评论又可以使用acticle嵌套:评论人:header ,评论:p

关于div:
无任何语义,就是个盒子,用于页面的结构化布置的样式化

总结:
(1)div负责结构化样式,别把它们代替div
(2)能使用article不使用section,能使用aside、nav不使用section
(3)如果没有标题化语义,就不要要section嵌套,可以选择p

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页