Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。

语义化的好处：第一，有利于SE0搜索引擎搜索。

第二，团队开发中，良好的语义化标签，可以减少很多差异化，减少成员间沟通成本，方便开发和后期维护，利于实现模块化开发。

第三，利于屏幕阅读器进行无障碍阅读页面内容。

1.Web语义化的含义

　　Web语义化，其实是伴随着Web前端的不断发展和完善，进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化，对Web语义化也提出了更高的要求。 

　　何为Web语义化？个人认为，Web语义化是指在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web操作和网站SEO，方便团队协作的一种标准，以图实现一种“无障碍”的Web开发。 

比如下面的一段代码：



<header>
    <h1>标题</h1>
</header>
<main></main>
<footer></footer>

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

而对于下面的代码：



<div>
    <span>标题</span>
</div>
<div></div>
<div></div>

你能知道这表示的是header、main、footer三部分？显然不能。并且这种问题不是简单通过加class = "header"来实现，因为SEO是通过网页的DOM结构来搜索的，并且一个网页中的class是很多的，不要增加没必要的class。 
当然在使用CSS和JavaScript时，也要尽量使class、id及函数名等实现见文知意。 

而在团队协作中，践行Web语义化使得各前端工程师有一个统一的参照标准，防止了参差不齐的代码使得团队协作效率的低下和代码bug的增多。



2.Web语义化的作用

可以归纳为以下3点： 

- 语义化的Web结构利于机器识别，方便SEO； 

- 语义化的Web结构代码简洁明了，利于人阅读和维护，方便以后扩展； 

- 语义化的Web结构利于团队协作，减少出错几率，使工作有个统一标准；



3.如何实现代码语义化

其实项目在不同的要求下可能会在Web语义化方面会有不同的方式，但是个人认为，培养自己写代码时遵循Web语义化的方法是相同的。具体可以是如下步骤： 

1. 首先要知道Web中的常用标签有哪些，知道每个标签的具体含义和应用场合。这些知识网上有很多资料，比如 菜鸟教程 和 w3cSchool 。这里补充一下， Code Guide 上有很全面的代码书写规范，建议大家也去看看 

2. 其次，自己多实践。在敲代码的时候，多想想每个地方的结构是否都符合Web语义化。在练习中不断加深对Web语义化的理解和应用。 

3. 最后，多去模仿一些网站的代码，看看别人设计的代码是如何做到Web语义化的，多吸取别人的经验和方法。

   Web语义化，简而言之，就是用正确的标签做正确的事。
  HTML语义化让页面内容更加结构化，结构更清晰，便于浏览器，搜索引擎解析。语义化让文档更易读，搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重，利于SEO；另一方面，使屏幕阅读器能更好的为残疾认识服务，便于阅读和理解。
参考：https://www.zhihu.com/question/20455165
          https://www.cnblogs.com/freeyiyi1993/p/3615179.html

学术届将web语义化称为Web3.0的核心，目标是将当前的网页提升为计算机能够“理解”和处理的网页。 核心思想是标注网页对象使其对应本体中的实体，并通过逻辑等手段进行自动推理。 作用在于更好整合网络上的资源，使计算机能够处理分布于不同位置的信息，自动产生问题的解决方案




简言之，web语义化的目的是提高计算机和人对web代码的可读性。


网上的解释很多，个人总结分三个阶段比较容易理解。
1、原始的一些有实际含义的标签定义。浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。


2、前端开发人员自定义的标签。但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。


3、在第二步的推动下结合新技术出现的一些标签。W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。 正所谓：世上本没有路，走的人多了，也便成了路。



参考链接：https://www.zhihu.com/question/20455165/answer/15183794
链接：https://www.zhihu.com/question/20455165/answer/15183203