关于Web语义化

article/2025/7/15 14:55:16

对于“web语义化”这个词语我相信只要是从事前端的人都不陌生，当然我对这个词语也是非常熟悉，我相信从事前端工作的同事在投简历时都会在招聘需求里面看到这句话：“对web语义化有深刻的理解”，当然我本人也是从某公司的招聘需求里看到的这个词语，那么到底什么是web语义化？它有什么作用？现将我自己收集整理的资料与大家分享一下：

什么是web语义化

如今互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作网页也从当初的table表格嵌套发展到了 div+css，这是进步的标志。然而，我们似乎看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一种html标签存在。这种现象(使用习惯)非常的不好，滥用现象使得网页制作似乎就只剩下了div。刚才说了，时代是在进化着的，所以，诞生了web语义化这个概念。而它又包含两个方面：html语义化及css命名语义化。

首先抽象的说下语义（Semantic）的概念：“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。”那么web语义化也可以简单的理解为：用特定的语言来定义特定的事物。

为什么要web语义化？

首先，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。

以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，p等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，下面给出一部分标签的语义：

div 语义：Division(分隔)

span 语义：Span(范围)

ol 语义：Ordered List(排序列表)

ul 语义：Unordered List(不排序列表)

li 语义：List Item(列表项目)

…………

如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住：

结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css

其次，SEO的时候我们经常用h1来突出标题，用strong来突出关键字，这确实就是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页，它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题，我们或许会这样写：

<div id=”title”>文章的标题</div>

访客或许能理解我们的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

小提示：h1拥有最高的权值，在一个页面中最好指使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

当然语义化还有其他优势：

正如上面那个例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。当然语义化代码也是我们能力的体现。

怎样进行web语义化？

1、html语义化

一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让css使一个html元素看起来就像另一个html元素，比如用<div>来代替<p>标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong> ,<em> 用来区别于其他文字，起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明显的告诉你他们是做什么的。如：

<Hx>

<h1>、<h2> 、、<h5> 、<h6>，作为标题使用，并且依据重要性递减。<h1>是最高的等级。

<p>

段落标记，知道了<p> 作为段落，我们就不会再使用 <br/> 来换行了，而且不要 <br/> <br/> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br> 。段落与段落之间的空隙也可以利用css来控制，很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。

2、css命名语义化

一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子：

…而现在我们想把页面中的元素调换一下位置，如果我们使用的是结构化方式(1)，那么我们就要把所有css类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。