语义化标签是降低后期维护成本的关键。使用<nav><header><main>等标签能精准定位修改范围、提升可访问性、增强CSS选择器稳定性，并避免因class命名变更或闭合缺失导致的bug和渲染差异。
语义化标签不是“加分项”，而是后期维护成本的分水岭。 用一堆 <div> 堆出来的页面，改一个导航栏可能牵动五个文件；换成 <nav>、<header>、<main>，定位修改范围立刻收窄到单个语义区块。
为什么 <div> 多了反而难维护
当结构全靠 <div class="wrap">、<div class="inner">、<div class="content-box"> 堆叠时：
- 搜索
class="nav"可能匹配到侧边栏、页脚、弹窗里的三处导航，得逐个点开确认 - 想把主导航从
<div>换成带 ARIA 的可访问结构，得手动翻 DOM 树找对应层级 - 新成员接手时，光看 HTML 根本无法判断哪个
<div>是真正的页面主体内容 - CSS 里写
.content-box > p，结果某天<p>被挪进另一个同名<div>，样式就失效了
<header>、<nav>、<main> 这些标签真能减少 bug
它们不只是“看起来更规范”，而是直接绑定浏览器行为和辅助技术逻辑：
-
<nav>被屏幕阅读器识别为导航区域，用户可快捷跳转——如果用<div role="navigation">手动模拟，漏写aria-label就等于没写 -
<main>是页面唯一主内容容器，搜索引擎和 Lighthouse 都依赖它判断内容权重；多个<main>或完全不用，会触发可访问性警告document-has-main -
<article>和<section>区分“独立内容单元”和“逻辑分组”，影响 RSS 抓取、打印样式、甚至某些 CMS 的自动摘要生成
嵌套过深时，语义标签比 class 更可靠
比如一个卡片组件，传统写法可能是：
立即学习“前端免费学习笔记（深入）”；
<div class="card">
<div class="card__body">
<div class="card__title"><h3>标题</h3></div>
<div class="card__content"><p>正文</p></div>
</div>
</div>
换成语义化写法：
<article class="card"> <header><h3>标题</h3></header> <div><p>正文</p></div> </article>
- 即使去掉所有
class，<article>+<header>已经表达出“这是个独立内容块，且含标题”的结构意图 - 后续加
aria-labelledby或调整 heading 级别时，目标元素明确，不会误操作到其他<div> - 用 CSS 选择器
article > header比.card__body > .card__title更少受 class 命名变更影响
不写闭合标签的代价远超省下的那几个字符
HTML5 允许省略某些结束标签（如 <p>、<li>），但实际项目中建议显式闭合：
- 编辑器格式化工具（如 Prettier）默认要求闭合，不写会导致保存时自动补全，干扰 git diff
-
<script>标签内如果漏写</script>，整个后续 HTML 会被当成 JS 字符串解析，错误极难定位 - 嵌套
<div>时，漏闭合一个标签，后面所有结构都会错位——浏览器容错机制会尝试修复，但修复逻辑因引擎而异，Chrome 和 Safari 渲染结果可能不同 - 服务端模板（如 EJS、Twig）里混写 JS/HTML，不闭合容易引发语法解析中断
真正省事的做法不是省标签，而是用 Emmet 输入 nav>ul>li*3 回车，自动生成带闭合的完整结构。
