用<header>替代<div id="header">不是锦上添花，而是避免搜索引擎漏抓关键内容、屏幕阅读器跳过导航、影响页面加载逻辑的底层必要动作；因其提供原生语义锚点，使爬虫和辅助技术能准确识别导航区域并赋予更高索引权重。
直接说结论：用 <header> 替代 <div id="header"> 不是“锦上添花”，而是避免搜索引擎漏抓关键内容、屏幕阅读器跳过导航、甚至影响页面加载逻辑的底层必要动作。
为什么 <div> 会干扰 SEO 和可访问性
搜索引擎和屏幕阅读器不靠 class 名或注释识别结构，只解析标签语义。一个写成 <div class="nav"><ul>...</ul></div> 的导航区，在无 CSS 状态下就是一堆没上下文的列表项；而 <nav> 一出现，爬虫立刻标记“此处为导航区块”，并赋予更高权重索引其中的链接。
常见错误现象：
- 页面在 Google Search Console 中“标题/描述提取失败”，实际是因为
<h1>被包在多个嵌套<div>里，缺乏<header>或<main>的语义锚点 - 视障用户用 VoiceOver 切换“下一个导航区”时直接跳过，因为
<div class="menu">不触发role="navigation"的隐式 ARIA 行为
<main> 不是可选装饰，而是 DOM 结构的强制分界点
<main> 在浏览器中具有明确的隐式 ARIA 角色 role="main"，且每个页面**有且仅能有一个**。它不是视觉容器，而是告诉辅助技术“这里才是页面核心内容起点”。
立即学习“前端免费学习笔记（深入）”；
使用场景与坑点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 如果把整个
<body>内容都塞进一个<div class="wrapper">，再在里面放多个“伪 main 区”，搜索引擎可能无法区分主次内容，导致文章正文权重被稀释 -
<main>不能嵌套在<article>或<section>内部——这是规范硬性限制，否则 Chrome DevTools 会在 Accessibility 面板标为“ARIA 属性冲突” - 服务端渲染（SSR）项目中，若
<main>被动态插入（如 React 的createPortal），可能造成首屏可访问性检测失败，需确保 SSR 输出中已存在
<section> 和 <article> 的边界在哪
二者都表示“独立内容区块”，但语义强度不同：<article> 强调可独立分发、复用（如博客文章、新闻条目），<section> 是更弱的组织单元（如“产品特性”“客户评价”这类页面内分组）。
参数差异与误用后果：
- 用
<section>包裹单个按钮或广告位——这违反语义，应改用<div>；否则屏幕阅读器会错误播报“进入新内容节”，打断用户流 - 把整篇博客正文拆成 5 个
<section>（仅因用了 5 个<h2>），不如用一个<article>+ 多个<section>嵌套，否则失去“该文可被 RSS 单独抓取”的语义信号 -
<article>内部可以没有标题（<h1>–<h6>），但若缺失，部分读屏软件会降级为普通段落处理，建议至少保留<h2>
重构时最容易被忽略的兼容性细节
HTML5 语义标签在 IE9+ 原生支持，但老版本 IE（尤其是 IE8 及以下）需要 document.createElement 模拟，而现代项目常直接忽略这点——问题出在 SSR 或静态生成环节。
真实踩坑点：
- Next.js / Nuxt 项目开启
output: 'export'后，若未配置script注入 HTML5 shiv，IE11 下<header>仍会被当作未知标签，CSS 选择器header { display: block }失效，导致布局塌陷 - CSS 中写
div#footer比footer优先级高，重构时若只改 HTML 标签却不清理旧 CSS，反而造成样式覆盖失效 - 某些 CMS 导出的 HTML 自动包裹
<div class="content">，此时直接在外层加<main>会导致嵌套层级错乱，需先剥离冗余 wrapper
重构不是替换标签名，而是校准内容与机器可读意图之间的映射关系。最复杂的点往往不在标签本身，而在你是否清楚每个标签在 DOM 树、ARIA 树、SEO 索引树中分别触发了什么行为。
