浅谈web语义化

关于web语义化的理解

每次在投简历的时候都可以看到这句话：‘对web语义化有深刻的理解’。

个人认为，web语义化是指根据内容的结构（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器更好的解析。

在进行页面布局时，尽量使用语义化的标签，使页面结构清晰，易于网站seo和团队协作。

示例：

代码1：

<h1>aaaa</h1>

<p>bbbb</>

这段代码能很直观的告诉团队其他同事和搜索引擎：这段代码由标题和段落组成。并且在进行seo时，能够被搜索引擎识别。

代码2：

<div>aaaa</div>

<div>bbbb</div>

通过样式控制div的表现，我们也可以使‘代码2’和‘代码1’的表现一样，但是不能让人一眼就看出来这段代码由标题和段落组成，搜索引擎也不能识别谁是标题，谁是段落（因为seo是通过网页的DOM结构来搜索的）。

 

html5中header、nav、article、section、sidebar、footer等新标签在布局时就可以使用，使页面结构清楚。

h1~h6这几个标签在搜索引擎中权值非常高，用它们写页面标题就是一个简单的SEO优化。

<b>标签和<strong>标签都能使字体加粗，但是他们有着本质上的区别：

　　<b>标签的定义和用法是规定粗体文本；

　　<strong>是短语元素，把文本定义为语气更强的强调的内容。

由此可见，如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。

语义化的作用：

1.在没有css的情况下，页面也能呈现出很好的内容结构；

2.用户体验：例如alt是图片的替代文本，也可解释图片信息。

3.有利于SEO：和搜索引擎建立良好沟通，有利于爬虫抓去更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）。

4.方便其他设备解析，以有意义的方式来渲染网页

5.便于团队开发和维护，语义化更具有可读性。

怎样写具有语义化的代码？

1.尽可能少的使用无意义的标签div和span

2.在语义不明显时，既可以使用div，也可以使用p，此时尽量用p

3.不要使用纯样式的标签（如b），改用css样式设置

4.需要强调的文本，可根据其强调的程度来使用strong或em标签。

5.使用表格时，标题要用caption，表头用thead，主体部分用tbody。表头和一般单元格要区分开，表头用th，单元格用td

6.每个input标签对应的说明文本都需要使用label标签，并且通过input设置id属性，在label标签中设置for=someId来让说明文本和相对应的input关联起来