HTML5结构化标签

时间:2021-07-14 17:07:26

一 结构化标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

在讲这些新标签之前,我们先看一个普通的页面的布局方式:

HTML5结构化标签

  上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,而我们是通过class进行区分,并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范,搜索引擎只能去猜测某部分的功能,另外就是此页面程序交给视力障碍人士来阅读的话,文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况:  

HTML5结构化标签

二 article与section 区别

article:一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

总结:

article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性、局部整体性。

section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。