语义化-HTML5标签的理解

一.为何要用h5标签

html5增加了新标签，为了跟上时代的脚步，最近尝试在项目中用到，想到没看官方文档理解一下很难用的好，于是找到官方地址理解了一下。这里主要看了一些结构性（Sections）元素（官方地址）：header,footer,nav,section,article,aside，这些用来替代千篇一律的div布局，非常语义化。下面列举简单说一下，当作自己的备忘。

article标签从字面来看就是一篇文章，是一个独立的，不需要上下文，单独拿出来就是完整的一部分。

（比如一篇博文，一封邮件，一条评论）。如果是article嵌套article（比如一篇博文，嵌套评论），说明内嵌的article跟父article是有关联的。

section标签相比起div更有意义，是一个主题，一个分类的聚合，通常有一个标题。比如一个网站的主页可以分为介绍，最新内容和联系信息等section。比如一份报纸分为多版，一本小说分为多个章节。一般来说，文档内容 明确列出了大纲再用section比较合适。如果只是想加style或者script，更适合用div标签。

nav标签从字面就能知道是导航的意思，详细一点就是网站地图的导航或者文档内部的快速跳转。但是一般网站footer处友情链接等就不适合用这个标签，用p标签包一下然后把超链接列举一下就可以了。

aside标签包含的内容更上下文是无关的，在排版上可能表现为引用或者边栏，广告，nav标签组等（但不一定是，要根据内容判断），其内容与页面的主题内容是无关的。

hgroup标签是不同级标题的集合。比如文章的主标题用h1，副标题用h2。

header标签表示一组引导性的内容，通常会包含h1-h6标签，hgroup标签，但不是必须。同时也可以包含一个部分内容的目录，搜索表单等。

footer标签通常包含作者信息，相关文档的链接，版权信息，长附录，许可证协议等
署名和类似信息可以放在footer或者header里面。

可以是整个网页的footer，也可以是某个section里面的footer。

address标签表示联系信息，但不可以用来包裹任意的地址。

PS：看到一篇文章，对h5标签的分析挺详细的，学习了一下。

二.如何兼容ie

这个现在的解决办法是通过在head处引用一个js文件来兼容ie，要点就是调用
document.createElement方法来生成HTML5标签元素，在后面用到这些标签的时候浏览器就会认得新标签了。因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

三.总结与思考

语义化的意思根据内容使用适合的标签，而不是看设计效果来使用标签。所以，我们是要看这一块的内容跟整个文档的关系，如果这一块内容长得像侧边栏，就轻率地使用aside标签，而不考虑其实它是这个文档的导航，只是它刚好长得有点像边栏，我们应该使用nav标签才能正确表达它是导航的意思。

所以在看设计稿的时候，我们需要用心去读懂一个文档，这个文档哪一部分起到引导的作用，哪一部分是主题内容，主题内容又是怎样划分模块的，有没有作者版权联系信息等。我们应该从文字去理解它是什么含义，而不是它看起来像什么。

我们做的这些，对普通用户可能没有什么意义，但是对于无障碍，以及爬虫是很重要的。良好的结构能让机器更好地理解我们网页想要表达的重点。做到人和机器都能容易地理解前端工程师的意图，是我们的终级追求。