HTML语义化

编写代码都讲究结构清晰，逻辑明确，便于他人阅读和团队开发，前后端都是如此，但是在过往发展的一段时间里，html很多时候都是各种div嵌套堆砌，css叠加等，这种代码当然难以阅读维护，所以相关组织也在后续推出了一系列语义化的元素标签，方便更好地搭建HMTL的语义结构，这就是HTML语义化的由来。

语义化的作用

除了基础的使HTML结构清晰外，语义化还有以下一些好处：

• 有利于SEO（搜索引擎优化）：良好的HTML结构可以让搜索更加便捷的查询到有效信息，有助于爬虫抓取更多的有效信息。
• 方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页
• 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
• 增强页面的可读性。如一些新闻类的网站就要求界面符合标准语义化结构，这种结构使得文章结构会更加清晰，方便读者的浏览和阅读。

语义化标签

语义化标签即指标签具有明确的使用含义。H5新增了一些语义元素，目前所有浏览器（IE8及更早版本除外）都支持语义元素。
下面是HTML5新增的语义元素（注意：除了figcaption之外，其他的语义元素都是块级元素）：

<section>

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

<article>

定义独立的内容，article标签定义的内容必须是有意义并且独立于文档的其他部分。常用于论坛帖子、博客文章、新闻故事、评论等。

<nav>

定义导航链接部分，可以是页与页之间的导航，也可以是页内的段与段之间的导航。

<aside>

定义页面主区域内容之外的内容（比如侧边栏等）。aside标签的内容应该与主区域内容相关。运用场景一般有侧边栏广告等

<header>

定义文档的头部区域，也用于定义内容的介绍展示区域。

<figure> 和 <figcaption>

figure标签规定独立的流内容（图像、图表、照片、代码等等），该内容应该与主内容相关，但是被删除了也不影响主内容。

figcaption标签定义figure元素的标题，应该被助于figure元素的第一个或最后一个子元素的位置。

下面是HTML一些原有的语义标签

<h1> - <h6> 和 <hgroup>

网页中用来定义标题的六个级别，目前网页允许使用多组h1-h6标签，如果是用多组h1-h6标签时，需要采用hgroup来对一系列的h1-h6元素进行分组。

<table>、<thead>、<tbody>、<tfoot>

table标签用来展示表格，thead标签用来包含表头，tbody用来包含表格主体，这些标默认都不会影响表格的布局，可以采用css来该表表格外观。

解决IE8及更早版本兼容性问题

可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题，HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/，然后将以下代码放到网页的head元素中

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
 <![endif]-->