一、语义化标签的作用：
1、搜索引擎只能通过标签来判断内容的语义，语义清晰有利于搜索引擎优化。
2、渣网速下，样式未加载，也有可读性。
二、标签的语义
HTML标签的设计都是有语言考虑的。
以下是从书中截图出来的标签语言对照表。（红色框为常用的标签）
其中，div和span其实是没有语义的，他们分别只是用作块级元素和行内元素的区域分隔符。
存在的用途：对代码进行模块化，使得语义更清晰（对于开发者）
三、如何在开发中做到语义化标签
1、整体先确定HTML的标签，再选择合适的CSS
2、标签的选择：
A、标题：
H1-H6标签的使用要按照h1,h2,h3,h4,h5,h6这样依次排列下来，不要出现断层情况。搜索引擎对这个特别敏感。
例子：其中div标签起到概括模块的作用。
<h1></h1>
<div><h2><a>标题</a></h2></div>
<div><p>段落<strong>重要部分<strong></p></div>B、图片：
图片中添加alt属性：表示图片介绍
C、表单：
<form action="" method="">
<fieldset>
<legend>表单的名字</legend>//或caption
<input/>
</fieldset>
</form>D、表格
一维表格：
<table>
<caption>表单名</caption>
<thead><tr> <th>列1名</th> <th>列2名</th> </tr></thead>
<tbody><tr> <td>列1内容</td> <td>列2内容</td> </tr></tbody>
</table>对于二维的表格：
<table>
<caption>表单名</caption>
<thead><tr><th>空</th> <th>列1名</th> <th>列2名</th></tr> </thead>
<tbody><tr><th>行1名</th> <td>行1列1内容</td> <td>行2列2内容</td></tr></tbody>
</table>
3、注意
尽量少使用无语义标签div和span
语义不明显，既可以用p也可以用div的情况下，使用p。因为p默认有上下间距，去除央视后的可读性更好。
不使用纯样式标签：b,i，font,u。对于语义上需要强调的文本，可以使用strong和em等标签中，有加重的意思。
4、完成页面后，对语义是否良好进行检查。
注释掉css样式链接，在网页中查看，是否在没有css样式下，还能够得到较好的阅读体验。
5、其他
关于某些为了搜索引擎，仅让搜索引擎看到，不让用户看到的，可以正常使用标签，并设置text-indent:9999;将其移出用户的视线外。但是text-indent仅适用于块级元素，否则会产生滚动条。
不可使用width:0px;height:0px;overflow:hidden; 对于这种奇特的宽高设为0，又隐藏的东西，多了会被搜索引擎认为是作弊。
更多标签语义汇总请看我的另一篇博文《web标签语义汇总》
