语义化是页面结构的底层契约，错误使用会导致SEO、无障碍和维护问题；搜索引擎依赖原生标签判断权重与层级，屏幕阅读器靠语义标签导航，团队协作中语义标签提供可靠文档，且错误常静默失效。
因为语义化不是“后期优化项”，而是页面结构的底层契约——一旦用错或绕开，后续所有环节（SEO、无障碍、维护）都会被动承受技术债。
搜索引擎爬虫只认标签语义，不读CSS类名
百度和谷歌的爬虫不会解析 class="header" 或 id="main-nav"，它们依赖原生标签判断内容权重和层级。比如：
-
<h1>内容默认获得最高标题权重，而<div class="title">不会被识别为标题 -
<nav>区域内的链接会被优先抓取并标记为导航路径；<div class="menu">则完全被忽略 -
<main>是唯一被认定为“页面核心内容”的容器，影响搜索结果摘要生成
屏幕阅读器靠语义标签跳转，不是靠视觉位置
视障用户使用 NVDA 或 VoiceOver 时，会按 Ctrl+Alt+1 跳到 <h1>，按 D 列出所有 <nav>，按 M 直达 <main>。如果全用 <div> 堆砌：
- 他们无法快速定位导航或正文，必须逐行听完整页
-
role="navigation"等 ARIA 属性只是补救，不能替代原生<nav> - 某些旧版读屏软件甚至不支持部分 ARIA，但都支持 HTML5 语义标签
团队协作中，语义标签是比注释更可靠的文档
一个新成员打开代码，看到 <article> 就知道这是可独立分发的内容单元，看到 <aside> 就明白它和主文是弱关联补充——这种理解不依赖注释、不依赖命名规范、不依赖上下文猜测：
立即学习“前端免费学习笔记（深入）”；
-
<section>必须有标题（<h2>–<h6>），否则语义断裂；而<div>没这限制，容易误用 -
<footer>在<article>内表示该文章的尾部（如作者、发布时间），在<body>下才表示整个页面页脚 - 浏览器开发者工具里，语义标签自带折叠/高亮逻辑，
<div>块则全部平铺难分辨
最常被忽略的一点：语义错误往往在上线后才暴露——SEO 流量缓慢下滑、无障碍审计突然失败、第三方嵌入组件因找不到 <main> 而降级渲染。这些都不是运行时报错，而是静默失效。
