语义化-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标签才能正确表达它是导航的意思。

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

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