一、比较
下面我选取两个网站进行案例分析，一个是语义化标签使用较好的网站，另一个是语义化标签使用较差的网站。分别进行比较分析
网站一：MDN Web Docs
可以看到，MDN Web Docs 使用了语义化标签 <header>、<nav>、<ul>、<li>、<main>、<article>、<section>、<h1>、<h2>、<p>、<footer> 等，这些标签可以让代码更易读、易维护，同时也有助于 SEO。
网站二：新浪网首页
可以看到，新浪网首页使用了大量的非语义化标签，如 <div>、<ul>、<li>、<a> 等，没有使用语义化标签 <header>、<nav>、<main>、<article>、<section> 等，导致代码可读性较差，难以维护，同时也不利于 SEO。
二、总结差异
非语义化标签和语义化标签的主要差异在于它们在结构化文档中的作用和意义。 非语义化标签通常只是为了实现页面布局和样式而存在，没有表达出它所包含内容的含义。 而语义化标签则更加明确地表达它所包含内容的含义。
具体来说，以下是一些非语义化标签和它们的替代语义化标签及其差异：
<div>vs.<section>：<div>是一个通用的容器标签，用于组织网页内容。而<section>也是一个容器标签，但它具有更明确的语义，表示一个独立的部分，通常具有标题。使用<section>可以更清晰地表达内容的层次和结构。<span>vs.<em>：<span>也是一个通用的容器标签，用于对文本进行样式化。而<em>表示强调，通常用于强调文本中的某些部分。使用<em>可以更加明确地表达文本的含义，同时也有助于屏幕阅读器等辅助技术的识别。<table>vs.<ul>和<ol>：<table>用于展示表格，而<ul>和<ol>用于展示列表。虽然<table>可以用于展示列表，但它的语义更加复杂，而且在移动端等设备上可能不太友好。使用<ul>和<ol>可以更加明确地表达列表的含义，同时也有助于 SEO。
总之，在实际开发中，应尽量使用语义化标签，因为它们可以更加明确地表达内容的含义，有助于提高代码的可读性和可维护性，同时也有助于 SEO。
三、为什么现在讲究HTML语义化
知其为什么，就要从其优点入手
HTML 语义化的优点如下：
- 提高页面可读性：使用语义化标签可以让页面的结构更加清晰明了，让人更容易理解和阅读页面内容，提高页面的可读性。
- 提高页面可维护性：使用语义化标签可以使代码更加易于理解和维护，降低代码的复杂性和维护成本。
- 有助于 SEO：搜索引擎可以通过分析页面的结构和标签来了解页面的内容和重要性，使用语义化标签可以提高页面在搜索引擎中的排名。
- 提高可访问性：使用语义化标签可以让屏幕阅读器和其他辅助技术更容易理解页面内容，提高页面的可访问性。
- 使代码更加清晰简洁：使用语义化标签可以让代码更加简洁明了，降低代码的复杂性，同时也有助于代码的可读性和维护性。
