HTML语义化

这两天先实现一个小目标：
理解一个比较新潮的词，HTML语义化

三步走：是什么，为什么，怎么做

首先：

啥叫HTML语义化呢？简单就是说，让人家看到你的HTML就能从字面读出，这个部分是写什么内容。

然后：
这样做有啥好处呢？

1.优雅降级，确保在css文件在可能意外加载不出来的情况下，页面依旧优雅。借用浏览器内置的自定义样式（可能是用处比较小的。css加载不出的情况较少）
2.第二个原因简单粗暴有效，通过改善网站结构，让搜索引擎更容易获取你的关键信息，使得你的页面更容易被找到，也称作SEO（search engine optimization搜索引擎优化）根据爬虫依赖标签来确定上下文及关键字

（顺便提一下SEO，并不是字面意思，不是搜索引擎自己优化，而是指站长根据搜索引擎的排名机制，去优化自己的网站使其在搜索结果中出现在更高的排名中）
3.在同事看你代码的时候，更直白更简单

应该怎么做？

1.多使用带语义的标签，少使用没有语义的标签
举个栗子：有语义的
        <h1>-<h6>  一眼看出是标题文本 <li>子项，说明有个列表存在，一般有多个子项
        <em> <strong>强调标签
        这些都是自带样式的。
        无语义：
        <span><div>这两个主要用来处理结构，作为容器
        <i><b><u>样式标签，只有样式没有意思
2.开始接受H5的新标签，H5新标签大部分都可以看出语义
        不过要看风向，现在好像还不够完善，用的人也不是很多
3.以下是一些日常习惯：
        需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
        使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
        表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
        每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

http://www.cnblogs.com/freeyiyi1993/p/3615179.html
这里是一个传送门，文章里很多观点都是借用这位大哥的。如果这位大哥介意我的分享，请私信我，立删！
最后感谢大哥的文章，写得不错。