本系列源自《编写高质量代码-web前端开发修炼之道》
HTML，CSS，JavaScript三者中，HTML作为结构，CSS作为修饰，JavaScript作为控制。不管是在前端还是后台，结构都是非常重要的，使用HTML时必须要考虑语义化。
1.如何确定你的标签是否语义化？
浏览器会给标签给定默认样式，所以就算不用CSS修饰也能体现一些简单的样式。因此判断一个网页标签是否语义化的简单方法是：去掉CSS，看网站结构是否组织良好有序，是否仍然有良好的可读性。
你可以手动注释CSS代码，也可以使用web调试工具，比如firefox的Web Developer插件，可以禁用CSS。
2.如何选用正确的标签？
下面举了一些常见的例子：
2.1标题和内容
要 实现上面这个样式，可以使用方案一：
<div class="container"> <h2>标签的语义<a href="#">更多>></a></h2> <p>段落一的内容.....<strong>重要部分</strong>......</p> <p>段落二的内容.....<strong>重要部分</strong>......</p> <p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p> </div>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: #ff0;
}
h2{
position: relative;
border-bottom: 1px dashed #333;
}
h2 a{
position: absolute;
right: 0;
top: 0;
}
p{
text-indent: 2em;
line-height: 150%;
margin: 0 0 1em 0;
}
strong{
color:red;
font-weight: normal;
}
</style>
此方案将锚点放在了h2中，但很明显锚点”更多“不属于标题，所以这个是不合语义的。下面是方案二：
<div class="container"> <div class="title"> <h2>标签的语义</h2> <a href="#">更多>></a> </div> <p>段落一的内容.....<strong>重要部分</strong>......</p> <p>段落二的内容.....<strong>重要部分</strong>......</p> <p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p> </div>
CSS代码就不贴了，将锚点从标题中提出来，同时在二者外再加一个div块，表示他们形式上应该属于一个整体。方案二结构看起来要清晰的多。
2.2表单
一般来说，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。fieldset默认有边框，可以按需要更改样式，也可以隐藏legend标签，以此来兼顾语义和显示。
每个input标签对应一个label，通过for联系起来，下面是示例：
<form action="" method="" class="fieldset">
<fieldset>
<legend>登录表单</legend>
<p>
<label for="name">账号：</label>
<input type="text" id="name"/>
</p>
<p>
<label for="pw">密码：</label>
<input type="text" id="pw"/>
</p>
<input type="submit" value="登录" class="subBtn">
</fieldset>
</form>
2.3表格
表格经常用在数据显示页面上。table常用的标签有caption、thead、tbody、tfoot、tr、td、th。表格标题要用caption，表头用thead包围，主体用tbody包围，尾部用tfoot包围。
表头和一般单元格要分开，表头用th，单元格用td。
<table> <caption>表格标题</caption> <thead> <tr> <th>实现方式</th> <th>代码量</th> <th>搜索引擎友好</th> <th>特殊终端兼容</th> </tr> </thead> <tbody> <tr> <th>table 布局</th> <td>多</td> <td>差</td> <td>一般</td> </tr> <tr> <th>乱用标签</th> <td>多</td> <td>差</td> <td>一般</td> </tr> </tbody> </table>
2.4语义化标签应该注意的问题
为了保证网页去除样式后的可读性，并且又符合Web标准，应该注意以下几点：
1.尽量少用div和span，用更加语义化的标签来代替它们；
2.语义不明显，既可以用p又可以用div的情况下，尽量用p。因为p默认有上下间距，去除样式后可读性更好 ，对兼容特殊终端有利；
3.不要使用纯样式标签，例如b，font，u等，改用CSS设置。语义上需要强调的用strong和em，二者有强调之意。