语义化的好处
语义化指"用表达含义的标签而不是清一色 div 搭页面"。收益分四层：可访问性——屏幕阅读器靠 nav/main/article 等地标快速导航，盲人用户与依赖键盘的用户直接受益；SEO——搜索引擎从标签判断内容权重，nav 里的链接是站内导航、article 里的 h1 是文章主题；可维护性——结构自解释，改版时一眼看懂布局；默认样式——语义标签自带合理的浏览器默认表现，省去从零调样式。
对比两个极端：<div class="top"><div class="menu"> 之类的 div 汤，人要读 class 名才能猜结构；而 header/nav/main/footer 一眼即明，CSS 选择器也更稳定（不依赖自定义类名拼写）。
原则：先选语义标签，找不到合适的再用 div/span；class 名只服务样式，不承担结构说明职责。
本节要点语义化让结构自解释，同时服务可访问性、SEO 与维护效率；选标签的顺序是"语义标签优先，div/span 兜底"。
代码
【反面示例：div 汤】
<div class="top">
<div class="menu"><div class="item">首页</div>...</div>
</div>
<div class="content">
<div class="post-title">标题</div>
<div class="post-body">正文</div>
</div>
【正面示例：语义化】
<header>
<nav><a href="/">首页</a> ...</nav>
</header>
<main>
<article>
<h1>标题</h1>
<p>正文</p>
</article>
</main>
【判断顺序】有语义标签 → 用语义标签；仅作布局包装 → 用 div；仅包行内文字 → 用 span
