HTML语义化以及HTML5新增语义化标签

一、为什么要进行HTML语义化

现在的页面通篇都是div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方W3C，也在HTML5给出了几个新的语义化的标签。

二、什么是HTML语义化

HTML语义化其实就是HTML标签语义化，根据文本的结构化，用正确的标签做正确的事情，便于开发者的阅读和写出更优雅的代码。

三、为什么要进行语义化

1、为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。
2、提高用户体验，比如：title，alt用于解释名词和图片信息。
3、利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

5、便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

四、在语义化的时候我们要注意什么

1、尽可能少使用没有语义的div、span元素

2、在p和div都能使用的时候，尽量使用p，因为p标签有上下边距，可以兼容特殊终端。

3、不要使用纯样式标签，如：b、font、u等，改用css设置。
4、需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b，因为没语义），em是斜体（不用i同b）；

5、使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头标题用th，内容单元格用td；

五、H5新增加的语义化标签

　1.header元素
　　header 元素代表“网页”或“section”的页眉
　　通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
　　2.footer元素
　　footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
　　3.hgroup元素
　　hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
　　4.nav元素
　　nav元素代表页面的导航链接区域。用于定义页面的主要导航部分
　　5.aside元素
　　aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
　　6.section元素
　　section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组
　　7.article元素
　　article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
　　8.address元素
　　address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。