语义化标签

一、语义化标签的作用：

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标签语义汇总》