HTML代码优化之标签语义化

在HTML、CSS、JavaScript这三大元素中，HTML才是重要的，结构才是重点，样式是用来修饰结构的。正确的做法是先确定HTML，确定语义的标签，再来选用适合的CSS。

如何确定标签是否语义良好？
判断标签语义化是否良好的一个简洁方法：去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。语义良好的网页去掉样式后结构依然很清晰。

除了去掉样式后的可读性，值得重点提及的还有h标签。h标签的语义是”标题”，搜索引擎对这个标签比较敏感，尤其是h1和h2.一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要按照h1、h2、h3、h4这样的顺序排列下来，不要出现类似h1、h3、h4漏掉h2的情况。

下面列举一些常见的模块

(1)标题和内容
html部分：

<div class="title">    <h2>标签的语义</h2>    <a href="#">更多&gt;&gt</a></div><p>段落一的内容......<strong>根据浏览器的默认样式</strong>......</p><p>段落二的内容</p>

css部分：

.title{border-bottom: 1px dashed #FFF;text-align: right;}.title h2{float: left;}p{text-indent: 2em;line-height: 150%; margin: 0 0 20px 0;}strong{color: red;font-weight: normal;}

当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现

(2)表单

这种表单模式，可以使用如下的方案实现其效果

<form action="#" method="get">    <fieldset>        <legend>登录表单</legend>        <p>            <label for="name">账号：</label>            <input type="text" id="name"/>        </p>                                <p>            <label for="pas">密码：</label>            <input type="password" id="pw"/>        </p>        <input type="submit" value="登录" class="subBtn"/>    </fieldset></form>

分析一下语义

<表单 action="#" method="get">    <域集>        <域集名>登录表单</域集名>        <段落>            <表单项说明 for="name">账号：</表单项说明>            <表单项 type="text"/>        </段落>                                <段落>            <表单项说明 for="pas">密码：</表单项说明>            <表单项 type="password"/>        </段落>        <表单项 type="submit" value="登录" class="subBtn"/>    </域集></表单>

一般来说，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。因为fieldset默认有边框，而legend也有默认的样式，为满足设计需要，可以将fieldset的”border”设为”none”，把legend的”display”设为”none”，以此来兼顾语义和设计两方面的要求。每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置”for=someid”来让说明文本和相应的input标签关联起来。

(3)表格

这种表格模式，可以使用如下的方案实现其效果

<table border="1">    <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>乱用标签的css布局</th>            <td>少</td>            <td>一般</td>            <td>差</td>        </tr>        <tr>            <th>标签语义良好的css布局</th>            <td>少</td>            <td>好</td>            <td>好</td>        </tr>    </tbody></table>

分析一下语义

<表格 border="1">    <表格标题>几种页面实现的比较</表格标题>    <表格头部>        <表格行>            <表头>实现方式</表头>            <表头>代码量</表头>            <表头>搜索引擎良好</表头>            <表头>特殊终端兼容</表头>        </表格行>    </表格头部>    <表格主体>        <表格行>            <表头>table布局</表头>            <表格单元格>多</表格单元格>            <表格单元格>差</表格单元格>            <表格单元格>一般</表格单元格>        </表格行>        <表格行>            <表头>乱用标签的css布局</表头>            <表格单元格>少</表格单元格>            <表格单元格>一般</表格单元格>            <表格单元格>差</表格单元格>        </表格行>        <表格行>            <表头>标签语义良好的css布局</表头>            <表格单元格>少</表格单元格>            <表格单元格>好</表格单元格>            <表格单元格>好</表格单元格>        </表格行>    </表格主体></表格>

方案二的语义清晰了很多，在使用表格的时候，应该注意选用合适的标签，表格标题要用caption，表头要用thread包围，主体部分用tbody包围，尾部要用tfoot包围，表头和一般的单元格要区分，表头用th，一般表格用td

语义标签化应注意的一些问题
为了保证网页去掉样式后的可读性，并且又符合Web标准，应注意以下几点：
(1)尽可能少使用无语义标签div和span
(2)在语义不明显，即可以使用p也可以使用div的地方，尽量使用p，因为p默认样式下有上下间距，去样式后的可读性更好，对兼容终端有利。
(3)不要使用纯样式标签，例如b、font和u等，改用css设置。语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。

参考资料：《编写高质量代码Web前端开发修炼之道》
（完）