如何合理利用符合web标准的标签

对于做前端，尤其对于一个专业的seo公司来说，在为客户重构网站的时候，如何让搜索引擎更好的抓取网页信息，合理的标签语义化也是一重要因素。

针对重构网站来说，有时候客户的网站可能嵌套了不知道几十层，能用span的时候不用span标签，能用strong的时候也不用stong标签，只是看到了很多的div嵌套，此时需要的是逐个

分析这些内容、区域的具体涵义了。

所谓合理的标签语义化，根据想对应的结构运用想对应的html标签是前提，首先我们可以以表格的为例：

<table>
    <tr>
        <td>星期一</td>
 
        <td>星期二</td>
    </tr>
    <tr>
        <td>销售额</td>
        <td>销售额</td>
    </tr>
</table>

此时，从表面上看是没什么问题，排版整齐，但是如果把此表格整改一下，如下：

<table>
    <caption>销售业绩</caption>
    <thead>
        <tr>
            <th>星期一</th>
 
            <th>星期二</th>
 
        </tr>
    </thead>
    <tbody>
        <td>销售额</td>
 
        <td>销售额</td>
    </tbody>
</table>

<caption>:表格的标题

<thead>:一表格的表头

<th>:表的某一列的列头

此时对于搜索引擎来说的话，那是更容易抓取的了。

再拿css来说明语义化，标准的语义化对于开发人员的维护更容易管理的，

#left{float:left;padding-left:50px;}

#right{float:right;padding-left:100px;}

用left与right来命名，未免有点局限性，如果想要将#left的区域放到右侧，#right的区域放到左侧，代码得变成这样

#left{float:right;padding-left:50px;}

#right{float:left;padding-left:100px;}

这样看的话，很是别扭，如果将代码变成这样，

<div id="main">main</div>

<div id="sidebar">sidebar..</div>

css调整成

#main{float:right;padding-left:50px;}

#sidebar{float:left;padding-left:100px;}

这样就会一目了然了。

其实判断一个网站是否符合web标准，可以将页面的样式去除，看页面的可读性，如果页面结构清楚便是一个运用了合理的语义化标签页面了。