语义失焦表现为HTML中大量无意义div套嵌、标题跳级、语义标签误用等；应优先替换header/nav/footer类div，按内容独立性区分article与section，并强制校验alt和label。
如何识别当前HTML是否“语义失焦”
直接看浏览器 DevTools 的「Elements」面板里有没有大量无意义的 <div class="header">、<div class="content"> 套嵌，或者标题标签跳级（比如 <h1> 下直接是 <h4>）——这说明结构已脱离内容本意，机器和人都在靠猜。
更隐蔽的问题是：一个 <section> 里没配 <h2>～<h6>，或 <nav> 里塞了登录按钮、搜索框；<main> 出现两次，或被包在 <header> 里。这些不是样式问题，是语义契约被破坏。
- 用 axe-core 或 Lighthouse 的「Accessibility」审计跑一遍，重点关注 “Heading levels” 和 “Landmark roles” 报错项
- 打开屏幕阅读器（如 NVDA 或 VoiceOver），听它怎么朗读页面——如果跳过整块区域或把按钮读成“div”，基本就是语义缺失
- 检查 CMS 或模板引擎输出的 HTML，确认是否动态插入了无层级上下文的
<h3>或<article>
哪些标签必须优先替换，且风险最低
别一上来就重写整个 DOM 树。先锁定三类高价值、低副作用的替换点：
-
<div class="header">→<header>：只要它确实是页头（含 logo + 主导航），替换后几乎零兼容问题 -
<div class="nav">→<nav>：前提是里面只有跳转链接，不含表单控件；若混有搜索框，拆出<form>单独处理 -
<div class="footer">→<footer>：注意它必须是页脚，不是某个模块底部；每篇<article>内部也可有自己的<footer>
这类替换不改样式、不碰 JS 绑定，CSS 选择器只需把 .header 改成 header（或保留 class 兼容旧样式），上线即见效。
立即学习“前端免费学习笔记（深入）”；
article 和 section 到底怎么分，现场判断口诀
别背定义，用这个动作检验：删掉周围所有其他内容，这块还能不能被单独转发、RSS 订阅、或被搜索引擎当独立条目索引？
- 能 → 用
<article>：博客正文、新闻稿、用户评论、产品卡片（带标题+摘要+时间） - 不能，但它是按主题聚合的一组相关内容 → 用
<section>：侧边栏“热门话题”、文章末尾的“相关推荐”、表单里的“联系信息”区块 - 纯样式分组、无逻辑主题 → 老实用
<div>：比如为实现某段间距加的空 div，或仅用于 CSS Grid 容器的 wrapper
特别注意：<article> 内部默认参与文档大纲，所以建议自带 <header> 包 <h2>；<section> 必须显式配 <h2>～<h6>，否则对 SEO 和辅助技术无效。
alt 属性和 label 关联不是补救项，是上线前必验点
很多遗留项目把 <img> 当装饰，留空 alt 或写“图片”；表单 input 全靠 placeholder 提示，没 <label for="id"> —— 这些不是“体验优化”，是功能残缺。弱网、无图模式、屏幕阅读器下，这部分内容直接不可见、不可操作。
-
<img src="logo.png">→ 必须加alt="公司名称"；纯装饰图写alt=""（不是省略） -
<input type="text" name="email">→ 必须有<label for="email">邮箱地址</label>，且 id 与 name 一致 - 批量检查：用 Chrome 控制台执行
document.querySelectorAll('img:not([alt])').length和document.querySelectorAll('input:not([id]), input[id]:not(label[for])').length，结果非零就得修
真正麻烦的不是加标签，而是旧系统里大量图片路径失效、表单字段动态生成导致 id 不稳定——得配合后端接口返回的字段名做映射，而不是硬编码。
