HTML语义化是指通过使用HTML标签和属性来表达网页内容的意义，以便机器可以更好地理解网页。而非语义化HTML则是指使用HTML标签和属性来描述网页内容的外观和布局，而不是其意义。下面通过分析一些实际网站的HTML结构，来对比非语义化标签和语义化标签的差异。
案例1：百度首页
百度首页的HTML结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<img src="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" alt="百度 logo">
</div>
<div class="nav">
<ul>
<li class="nav_item">
<a href="#">首页</a>
</li>
<li class="nav_item">
<a href="#">百科</a>
</li>
<li class="nav_item">
<a href="#">新闻</a>
</li>
<li class="nav_item">
<a href="#">地图</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="result">
<h3 class="result_title">
<a href="#">百度一下，你就知道</a>
</h3>
<div class="result_content">
<p>百度是一家中文搜索引擎，提供网页搜索、图片搜索、视频搜索、新闻搜索、地图搜索等服务。</p>
</div>
</div>
</div>
<div class="aside">
<div class="advertisement">
<img src="https://www.baidu.com/img/312e7f204328237322e7d87c889e281.jpg" alt="广告">
</div>
</div>
<div class="footer">
<div class="copyright">
<p>©2022 百度 - 京 ICP 证 030173 号 - 京公网安备 110108020200058 号</p>
</div>
</div>
</div>
</body>
</html>
可以看出，百度首页的HTML结构使用了大量的非语义化标签，如div.main、div.header、div.nav、div.content、div.result、div.aside和div.footer，这些标签主要用于描述网页内容的布局和样式，而不是其意义。此外，该结构中也没有使用HTML标签和属性来表示页面中的具体内容，如搜索框、搜索按钮，搜索结果等。
案例2：维基百科首页
维基百科首页的HTML结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>维基百科，自由的百科全书</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">特色内容</a></li>
<li><a href="#">帮助</a></li>
</ul>
</nav>
<div class="search">
<form>
<input type="text" name="search" placeholder="在维基百科中搜索">
<input type="submit" value="搜索">
</form>
</div>
</header>
<main>
<section class="content">
<h1>维基百科，自由的百科全书</h1>
<p>维基百科是一个基于维基技术的免费、开放式的百科全书，旨在为全球用户提供广泛、丰富、准确的知识内容。</p>
</section>
<section class="featured">
<h2>特色内容</h2>
<ul>
<li><a href="#">全球最大城市列表</a></li>
<li><a href="#">各国家和地区 GDP 列表</a></li>
<li><a href="#">历史事件分类</a></li>
<li><a href="#">科学领域分类</a></li>
</ul>
</section>
</main>
<footer>
<div class="copyright">
<p>©2022 维基百科 - 权利声明 - 联系我们</p>
</div>
</footer>
</body>
</html>
与百度首页相比，维基百科首页的 HTML 结构更加语义化。它使用了 header、nav、ul、li、a、form、input、main、section、h1、p、section、h2、ul、li、a 等 HTML 标签和属性，这些标签和属性更能表达页面内容的意义。例如，使用 nav 和 ul 表示导航栏和导航列表，使用 form 和 input 表示搜索表单和搜索框，使用 section 和 h1、p 表示页面的主要内容和段落，使用 section、h2 和 ul、li、a 表示特色内容的标题和列表。 通过以上两个案例的分析，可以看出语义化 HTML 在表达网页内容意义方面具有优势，能让机器更好地理解网页。而非语义化 HTML 则更注重描述网页内容的外观和布局。在实际开发中，应根据具体情况综合考虑使用语义化 HTML 和非语义化 HTML。
