搜索引擎和屏幕阅读器依赖语义化标签，因其仅依据html标签含义而非css或猜测结构来解析内容；如用替代会导致结构线索丢失，影响可访问性与seo。
为什么搜索引擎和屏幕阅读器都依赖语义化标签
因为它们不看 CSS，也不猜结构——只靠 HTML 标签本身的含义做判断。比如 <h1></h1> 被默认当作主标题，<nav></nav> 表示导航区，<main></main> 是唯一主体内容容器。一旦你用 <div class="header"> 代替 <code><header></header>，爬虫和读屏软件就失去结构线索。
常见错误现象：
– 页面在 VoiceOver 或 NVDA 中朗读时跳过“导航”“页脚”，全变成“div、div、div”
– 搜索结果里标题显示异常，或摘要抓取到页脚版权文字而非正文首段
- 搜索引擎优先索引
<h1></h1>~<h6></h6>、<article></article>，开启<section></section>和<nav></nav>规则，实时拦截常见语义疏漏 - CI 流程中加入
<aside></aside>CLI 检查，阻断语义错误合入主干 - 别信“我测试过读屏软件能读”，不同工具对容错策略差异极大；严格语义 = 最小兼容基线
最常被忽略的一点：语义不是写完就完事，它得随内容演进持续校验。比如新增一个弹窗组件，如果里面用了 <footer></footer>，整个页面就出现两个主标题——结构逻辑已经崩了，但视觉上毫无异常。