前言

对于“web语义化”这个词语，我相信只要是从事前端的人都不陌生，从事前端工作在投简历时都会在招聘需求里面看到这句话：“对web语义化有深刻的理解”，当然我本人也是从某公司的招聘需求里看到的这句话，那么到底什么是web语义化？它有什么作用？下面是我的一些理解

什么是 web 语义化?

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

Web语义化，其实是伴随着Web前端的不断发展和完善，进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化，对Web语义化也提出了更高的要求。而它又包含两个方面：html语义化及css命名语义化。

语义（Semantic）的概念：

语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。

那么web语义化也可以简单的理解为：用特定的语言来定义特定的事物。

比如下面这段代码：

标题


 
1
2
3
4

我们很直观地就能知道网页由三部分构成：header、main、footer。代码能直观地告诉搜索引擎和人：这段代码是由头部、主体部分和尾部组成。并且在进行SEO（搜索引擎优化）时，这三部分的内容是能够被搜索引擎识别的，这正是我们所希望实现的。

为什么要web语义化？

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

以前我对web开发的理解粗浅，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，p等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，比如：div 语义：Division(分隔)；span 语义：Span(范围)；ol 语义：Ordered List(排序列表)

如果无视标签语义和默认样式，所有标签都用div，整个页面一点语义都没有，搜索引擎还是看不懂。结构(html)才是重点，样式(css)是用来修饰结构的。 所以，要先确定html，确定标签，再来选用合适的css

语义化还有很多优势，比如语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。当然语义化代码也是我们能力的体现。

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

html语义化

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示：

一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让css使一个html元素看起来就像另一个html元素，比如用div来代替p标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。

大约有100多个HTML语义元素可供选择，以下是常用的语义元素：

h1~h6元素

定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级

header元素

用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

nav元素

定义页面的导航链接部分区域，不是所有的链接都需要包含在nav中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

main元素

定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

article元素

定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

section元素

元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

aside元素

定义与主要内容相关的内容块。通常显示为侧边栏。

footer元素

定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

small元素

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 small 标签将不起任何作用。

strong元素

把文本定义为语气更强的强调的内容，以表示内容的重要性。

em元素

标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

blockquote元素

定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

abbr元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

css命名语义化

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

CSS有两种命名规则：

1.结构化命名法；（根据位置命名）
2.语义化命名法。 ( 根据功能命名 )

结构化命名法：

根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器名字了，这样会很不方便，尤其是当页面结构复杂时，一会儿left,一会儿right，这样会很不容易维护。

语义化命名法：

根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等，这样整个页面看起来就比较清晰了，维护起来也比较方便。\

下面列表主要是常用功能语义标题：

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享