什么是HTML语义化
HTML的主要作用就是告诉浏览器这个页面里面要显示什么内容，方法有很多，比如有一篇文章标题是《我有一个梦》，我可以直接把它放在div标签里面，然后用css加以修饰；但是我也可以用一个h1标签来表示这个标题，指根据内容的语义，选择合适的HTML标签来编写文档结构。总的来说，就是“用最恰当的标签来标记内容”。它的好处是提高了网页的可读性、可维护性，即使没有CSS样式的加持下也能很好的呈现出内容结构和代码结构。同时也有助于搜索引擎优化和无障碍访问，有利于爬虫和抓取更多有效信息。下面以几个代码为例，分析语义化与非语义化标签的差异。
代码实例
实例一
语义化的<header>代码：
<header>
<h1>***</h1>
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
</header>
非语义化的<header>代码：
<section class="header">
<div class="title">***</div>
<ul class="navigation">
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</section>
在语义化的示例中，<header>标签用于包裹网页的头部，内部包含一个主标题和导航菜单，可以很清晰地表达出页面结构和内容。
而非语义化的示例中，使用了一个普通的<section>元素，添加了一个class属性header作为标识。标题和导航菜单使用div和ul等通用的HTML元素表示，没有直接表达出页面的头部结构。
假如我要去搜索*** 的文章内容，浏览器或者一些其他设备去解析代码的时候直接读取header标签里面的内容来进行区分，显然第二个未语义化的的网页会被直接pass。
实例二
语义化的<nav>代码：
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
非语义化的<nav>代码：
<div class="navigation">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</div>
在语义化的示例中，<nav>标签直接用于包裹导航菜单，内部使用<ul>和<li>标签表示菜单项，使用<a>标签作为链接。这样，可以明确表示出该部分的导航功能。
而非语义化的示例中，使用了一个普通的<div>元素，并添加了一个class属性navigation作为标识。内部仍然使用了<ul>和<li>标签表示菜单项，但没有使用<nav>标签明确表达导航的含义。
实例三
语义化的<h>示例代码：
<h1>这是一个主标题</h1>
<h2>这是一个副标题</h2>
非语义化的<h>示例代码：
<div class="main-title">这是一个主标题</div>
<div class="sub-title">这是一个副标题</div>
在语义化的示例中，使用了<h1>和<h2>标签来表示主标题和副标题。这些标签具有语义意义，可以向浏览器和搜索引擎传达出该文本是一个标题的信息。这样可以提高页面的可访问性和SEO优化。
而非语义化的示例中，使用了普通的<div>元素，并添加了class属性来标识标题的类型。虽然功能上没有问题，但缺乏明确的语义，可能增加其他开发人员理解和维护代码的难度。如果正好遇上人员调动，新人来维护代码，无疑会加大工作难度，耗费工作时间。
总结。
这东西和我们交流沟通也没有很大的区别，大到各个国家的语言不同，即使英美两国都讲英语，但是沟通起来确实非常困难的。小到各个行业，不同的行业，不同的区域都会有各自的语言特点，如果在计算机领域的人员听到一个卖水果的老板不知道什么是显示器，这无疑会让人们感到诧异和沟通困难。其实语义化也一样，让我们在代码语言规范化，让别人们可以更好地理解我们，同时也可以让我们更好的去理解别人，沟通更加方便。英语我们要注重发音，代码我们也要规范。让自己的话语更加容易被别人看懂，语义化的意义就和统一语言一样意义非凡。
