很多html标签往往都会带有一些默认的样式，而这有时候会使得初学者为了达到某种样式而使用某种标签，但是这样往往会破坏html的语义。把样式的问题交给css去解决，html应该关注的是标签的语义化！
一、标题的语义化：
html标题标签是h1~h6，这些标题的重要性以及大小，按照从1~6的顺序依次降低减小。一般我们在网页的编写当中较常用到的是前四个标题标签h1~h4。搜索引擎给予这四个标题标签以一定的权重。对于标题的语义化，我们要注意以下几点：
(1)一个页面只能有一个h1标签
虽然W3C中没有规定不能在同一个html页面中使用两个h1标签，但是h1作为权重最大的标题标签来讲，往往会被用于放置logo图片等具有代表性的内容，它相当于是一个页面内的主标题，正如一篇文章不可能出现两个主标题。因此为了语义化，一般不建议在同一个页面使用两个h1标签。
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
h1{
300px;/*高宽与logo图片一致*/
height:100px;
background-image: url("images/logo.gif");
text-indent: -9999px;/*文本对齐，-9999px能够确保h1内部文字内容被移出浏览器窗口外*/
}
</style>
<title>在h1中放入logo标签</title>
</head>
<body>
<h1>这是一个logo</h1><!--这里面的内容被隐藏-->
</body>
</html>
(2)h1~h6之间不可以断层
一个语义良好的页面，应当按照完整有序而没有出现断层的规则来使用标题标签
(3)不要利用标题标签来定义样式
标题标签会对内部文本字体进行加粗或者改变字体大小，为了获得样式而使用这些标签将会破坏页面的语义化，我们应当遵循结构与样式分离的原则。
(4)不要用div来代替标题标签
div是一个没有语义的标签，这样的做法会使得搜索引擎无法识别，让页面丢失权重。
二、图片的语义化
(1)alt和title属性（描述属性，其中，alt为必需属性，titie为可选属性）
这两个属性非常得相似，但是alt属性的描述内容是给搜索引擎看的，title属性的描述内容是给用户看的；当图片无法显示的时候，alt属性的内容将会显示出来，该内容在搜索引擎当中占有一定的比重，而当用户的鼠标移动到图片上时，title内的内容将会显示出来。
eg：
<img src="image/img.gif" alt="图片描述(给搜索引擎)" title="图片描述(给用户看)"/>
(2)figure和figcaption元素（图片加图注）
eg：
<figure> <img src="image/img.gif" alt="描述文字" /> <figcaption>描述文字</figcaption> </figure>
三、表格语义化
在表格中比较常用的标签有table，tr，td这三个标签，为了加强表格的语义，W3C新增了5个标签：th、caption、thead、tbody、tfoot
eg;
<table> <caption></caption> <!--表头--> <thead> <tr> <th>标准单元格</th> <th>标准单元格</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>标准单元格</td> <td>标准单元格</td> </tr> <tr> <td>标准单元格</td> <td>标准单元格</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>标准单元格</td> <td>标准单元格</td> </tr> </tfoot> </table>
四、表单语义化
(1)label
label标签for属性为所关联的表单元素的id，例如<input id="name" type="text"/>,则其所关联的label标签应该为<label for="name"></label>
label标签的for属性有两个作用：
1.语义上绑定了label元素和表单元素。
2.增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会 获得焦点。
label标签有两种关联语法：
<input id="cbk" type="checkbox" /><label for="cbk">复选框</label> <label>复选框<input id="cbk" type="checkbox"><label/>
(2)fieldset标签和legend标签
fieldset和legend标签可以给表单元素进行分组，其中，legend标签用于给表单定义标题。这两个标签结合起来可以制作美观的书签效果。更关键的是，我们可以定义fieldset元素的disabled属性来禁用整个组的表单元素。
五、其他语义化
1.换行符<br />
以下是错误的使用方法
<div> <span></span><br /> <span></span><br /> <span></span><br /> <span></span> </div>
<br/>标签有自己的特定语义，不能随便用来实现换行效果。W3C标准规定，该标签仅仅用于段落中的换行即<p>标签，不能用于其他情况。
2.无序列表ul
对于列表型数据，建议使用无序列表。
3.strong标签和em标签
strong用于实现加粗文本，em用于实现斜体文本。但是，我们不应该为了应用这两种样式而使用这两个标签，W3C给予了这两个标签以“强调”的语义，搜索引擎也给予了一定的权重给这两个标签，所以我们应当为了强调来使用这两个标签，然后通过css样式来定义外观。
4.del标签和ins标签(常用于网站在促销时的价格改变)
del表示“delete”，用于定义被删除的文本；ins表示“insert”，用于定义被更新的文本。
5.img标签
如果我们想要在网页中显示一张图片，使用img标签或者通过css的属性background-image来设置背景图片的方法都可以达到目的。什么时候使用img，什么时候使用背景图片，这取决于我们是否想要该图片被搜索引擎识别，当我们想要被搜索引擎识别的时候，就应当使用img标签。
6.平稳退化
我们应当确保自己的html页面在失去了js，css的作用下，依旧保有较为良好的可读性。
注：一些被HTML5舍弃的标签：
basefont，big，center，font，strike，s，u，dir,acronym,applet,isindex,frame,frameset,noframes