一、语义化标签的作用:

1、搜索引擎只能通过标签来判断内容的语义,语义清晰有利于搜索引擎优化。

2、渣网速下,样式未加载,也有可读性。

二、标签的语义

HTML标签的设计都是有语言考虑的。

以下是从书中截图出来的标签语言对照表。(红色框为常用的标签)

大语言模型 多标签文本分类_表单

大语言模型 多标签文本分类_语义化_02

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