语义标签缺失导致JS查询失效、无障碍检测报错及SEO失分，根本原因在于用class或div冒充header/main等标准标签，必须严格使用原生语义标签并正确嵌套。
语义标签缺失直接导致 JS 查询失效
常见错误现象：document.querySelector('main') 返回 null，但页面明明有主体内容。根本原因不是 JS 写错，而是用了 <div class="main-content"> 替代 <code><main></main>——浏览器和辅助技术不识别 class 名，只认标准语义标签。
使用场景：SPA 路由跳转后需要聚焦主内容区、自动化测试定位核心区块、SEO 抓取正文范围。
-
<main></main>在整页中必须且只能出现一次；多写一个，axe 等无障碍检测工具会直接报错 -
<section></section>必须带<h2></h2>或更高层级标题，否则语义降级为<div>，屏幕阅读器会跳过整个区块 <li>用 <code>data-module="product-list"配合语义标签，比纯 class 更可靠：既保留结构语义，又提供模块锚点 - Grid 区域名必须 1:1 对应真实标签：
header↔<header></header>，不可用 class 或 id 模拟 -
<nav></nav>不能塞进<section></section>当“万能容器”，导航逻辑必须独立存在，否则键盘 Tab 顺序错乱 - 嵌套子 Grid 可以，但外层容器必须语义成立——比如卡片用
<article></article>包裹，内部再用 Grid 排列；若用<div> 包，子 Grid 再漂亮也无语义价值 <h3>表格结构混乱让 VoiceOver 完全读不出行列关系</h3> <p>典型表现：屏幕阅读器读表格时，只报“单元格 1”“单元格 2”，不报“第1行姓名”“第2列年龄”。用户根本不知道数据在哪一维。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" 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 href="/xiazai/skill5806" title="html-deploy">html-deploy</a> <p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>根源不在 JS 或 CSS，而在 HTML 结构缺失关键语义节点：</p> <ul><li>表头必须用 <code><th>，且显式声明 <code>scope="col"或scope="row"；仅靠视觉居中或加粗，AT 无法推断关联 <thead>、<code><tbody>、<code><tfoot> 不是“可选装饰”，它们是 AT 解析表格逻辑的锚点；缺 <code><thead>，VoiceOver 就默认所有行都是数据行 <li>复杂表头（如“销售部 → Q1/Q2”两级）必须用 <code><colgroup></colgroup>分离列宽控制与展示逻辑，否则移动端重排时colspan直接失效- DOM 嵌套超过 4 层就该警觉；Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications” 可快速暴露冗余包裹
- 相邻语义一致容器应合并：
<section><h2>推荐</h2></section><section><h2>热门</h2></section>可简化为一个<section><h2>推荐</h2>...<h2>热门</h2>...</section> - 用
<figure></figure>包图片+说明，比<div class="img-wrap"> <img alt="HTML复杂布局的可维护性代码与可访问性关联度分析" ><div class="caption"></div> </div>少两层嵌套，且自带语义和默认样式隔离
Grid 布局与语义标签不匹配引发 Lighthouse 失分
真实错误：写了 grid-template-areas: "header nav main aside footer"，但 DOM 里用的是 <div class="main"> 和 <code><div class="aside">。视觉正常，Lighthouse 却在「Accessibility」和「SEO」两项全红。
<p>为什么这样做：浏览器渲染靠 CSS，但可访问性和 SEO 解析依赖 DOM 标签本身。冒充标签等于切断语义链，<code>role="main" 无法替代 <main></main> 的原生行为（如自动焦点管理、搜索引擎加权）。
立即学习“前端免费学习笔记（深入）”；
过度嵌套 div 导致维护成本指数上升
一个商品卡片 DOM 深度达 7 层：<div><div><div><article><div><div><div>...</div></div></div></article></div></div></div>。结果是：改个边距要查 4 层 class，JS 绑定事件得写 parentElement.parentElement.querySelector，新人接手第一反应是重写。
这不是代码量问题，是结构失控的信号：
<div> 本该是 <code><main></main> 却没改——它让所有后续逻辑都建立在流沙之上。
