码迷,mamicode.com
首页 > Web开发 > 详细

HTML5结构化标签

时间:2016-01-05 23:53:00      阅读:1811      评论:0      收藏:0      [点我收藏+]

标签:

一 结构化标签

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

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

技术分享

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

技术分享

二 article与section 区别

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

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

总结:

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

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

HTML5结构化标签

标签:

原文地址:http://www.cnblogs.com/CandyManPing/p/5104015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!