Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。
 
web语义化的好处
 
1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
 2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
 3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
 4. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
 

 
 

  学术届将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
 

Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。
 语义化的好处：第一，有利于SE0搜索引擎搜索。
 第二，团队开发中，良好的语义化标签，可以减少很多差异化，减少成员间沟通成本，方便开发和后期维护，利于实现模块化开发。
 第三，利于屏幕阅读器进行无障碍阅读页面内容。

 什么是 web 语义化,有什么好处
 
web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。
 
HTML 标签的语义化是指：通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构
 
css 命名的语义化是指：为 html 标签添加有意义的 class，id 补充未表达的语义，如[Microformat](http://en.wikipedia.org/wiki/Microformats)通过添加符合规则的 class 描述信息
 
为什么需要语义化：
 
- 去掉样式后页面呈现清晰的结构
 
- 盲人使用读屏器更好地阅读
 
- 搜索引擎更好地理解页面，有利于收录
 
- 便团队项目的可持续运作及维护
 
以下内容转自  https://blog.csdn.net/qq_38128179/article/details/80811339     @Demi博主原创文章
 
什么是语义元素？
 
语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到<h1></h1>标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。
 
为什么要语义化？
 
代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
HTML5常用的语义元素
 
HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示  
 
                             
 
大约有100多个HTML语义元素可供选择，以下是常用的语义元素
 
结构体
文本
一致
 
    
header
h1
h2
h3
nav
footer
article
section
 
    
p
ul
ol
li
blockquote
 
    
a
strong
em
q
abbr
small
<h1>~<h6>元素
 
定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级
 
<header>元素
 
用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
 
<header>

    <h1>HTML Reference</h1>

    <nav>

        <a>Home</a>

        <a>About</a>

        <a>Contact</a>

     </nav>

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

    <a>Home</a>

    <a>About</a>

    <a>Contact</a>

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

    <h1>My blog test</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

    <p>etc.</p>

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

    <header>

        <h3>

            <a href="">My blog post</a>

        </h3>

    </header>

    <section>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

</p>

    </section>

    <footer>

        <small>

            Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a>

        </small>

    </footer>

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

    <h2>Section title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

</section>
 
 <aside>元素
 
定义与主要内容相关的内容块。通常显示为侧边栏。
 
<aside>

     <h3>About the author</h3>

     <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>

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

    COPYRIGHT@dingFY_Demi

</footer>

 
 <small>元素
 
为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

<small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>
 
 <strong>元素
 
把文本定义为语气更强的强调的内容，以表示内容的重要性。
 
HTML should only be used to write 
<strong>content</strong>, and keep CSS for 
<strong>styling</strong> the web page.
 
 <em>元素
 
标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。
 
HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.
 
 <blockquote>元素
 
定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源
 
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">

Here is a long quotation here is a long quotation here is a long quotation

here is a long quotation here is a long quotation here is a long quotation

here is a long quotation here is a long quotation here is a long quotation.

</blockquote>
 
<abbr>元素
 
解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
 
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.