HTML5结构化标签
2016-01-05 22:40
471 查看
一 结构化标签
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
在讲这些新标签之前,我们先看一个普通的页面的布局方式:
上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,而我们是通过class进行区分,并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范,搜索引擎只能去猜测某部分的功能,另外就是此页面程序交给视力障碍人士来阅读的话,文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况:
二 article与section 区别
article:一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
总结:
article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性、局部整体性。
section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
在讲这些新标签之前,我们先看一个普通的页面的布局方式:
上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,而我们是通过class进行区分,并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范,搜索引擎只能去猜测某部分的功能,另外就是此页面程序交给视力障碍人士来阅读的话,文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况:
二 article与section 区别
article:一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
总结:
article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性、局部整体性。
section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。
相关文章推荐
- html5 本地存储 localStorage
- H5与Native交互的实现
- HTML5 localStorage本地存储实际应用举例
- 【仿】程序员的表白-源码HTML5+JQ
- h5
- HTM4和HTML5的区别
- 7 款华丽的 HTML5 Loading 动画特效
- 浅析HTML5 Web Workers使用场景与作用
- 关于 HTML5 的文件上传处理,兼容,以及 BLOB 对象的使用
- H5实现拍照并上传
- 传奇创世孙大宁:2016年H5将井喷,新传播途径是突破口
- html5+d3 svg 线条、图形颜色渐变动画
- HTML5 Canvas图像放大、移动实例1
- Html5添加Canvas的EAN13条形码生成插件教程
- 8个超炫酷仿苹果应用的HTML5动画
- HTML5 Canvas图片操作简单实例1
- HTML5 Canvas前台压缩图片并上传到服务器
- HTML5 Canvas显示本地图片实例1
- 后盾网html5视频教程全集观看下载
- html5图片懒加载