前言

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO（搜索引擎优化）。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

何为语义化标签

• HTML在页面中的作用就是结构和语义，就是划分内容，这里放什么，我们放的是什么。我们平时使用的<strong>标签等并不是html，其实是css在起作用。HTML其实就是页面结构的骨架，css只负责装修内部的结构，想要充分发挥css的作用，实现一个优秀的html结构是非常有必要的。
• 语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强 调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。
• 当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

使用语义化标签有什么好处

• 语义化的HTML结构是html的发展趋势。
• 掉或样式丢失的时候能让页面呈现清晰的结构;
• 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重；
• 便于团队的维护和开发
  • W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至 实现模块化开发。

语义化标签使用的案例分析

<table>
    <caption>支出统计</caption>
    <thead>
        <tr>
            <th>娱乐项目</th>
            <th>项目支出</th>
        </tr>
    </thead>
    <tbody>
        <td>聚餐</td>
        <td>200元</td>
    </tbody>
</table>

让我们对比非语义化标签的使用

<table>
        <tr>
           <td>娱乐项目</td>
           <td>项目支出</td>
       </tr>
       <tr>
           <td>聚餐</td>
           <td>200元</td>
       </tr>
</table>

为了使我们的网站更好的被搜索引擎抓取收录，更自然的获得更高的流量，网站标签的语义化就显得尤为重要。可以看到，语义化标签的使用页面的结构更加完整，代码更加具有可维护性。

结尾

正确的标签做正确的事情，页面内容结构化方便开发人员阅读，便于浏览器搜索引擎解析。