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