必须在表达页面或区块头部/尾部内容且语义合理时使用<header>和<footer>，如页面导航、文章标题与元信息、版权信息等；无语义归属的布局场景仍需用<div>。
能替代，但不是无条件替换；<header> 和 <footer> 不是 <div> 的语义升级版，而是有明确上下文职责的结构单元。
哪些场景必须用 <header> 和 <footer>？
它们只应在表达「页面或区块的头部/尾部内容」时使用，且需满足语义合理性：
-
<header>应包裹页面顶部导航、logo、搜索框，或<article>/<section>内的标题与元信息（如作者、发布时间） -
<footer>应出现在页面底部（版权信息、联系方式），或出现在<article>末尾（如编辑说明、相关链接） - 一个页面可有多个
<header>和<footer>，但每个都必须对应一个明确的「所属容器」——比如不能把全站底部版权塞进某个<section>的<footer>里
什么时候还得老实用 <div>？
当没有语义归属、纯为布局或样式隔离时，<div> 仍是唯一选择：
- 栅格容器（如
<div class="grid">）、Flex 包裹层（<div class="card-list">） - 动画触发区、JS 操作锚点（
<div id="modal-root">）、动态插入内容的空容器 - 尚未形成共识的 UI 组件（如「标签页容器」「折叠面板外层」），目前仍缺乏对应语义标签
- 嵌套过深且语义模糊的中间层：比如
<section> <header> <div class="header-actions">—— 这里的<div>是合理的，它不表达结构层级，只承载交互区域
滥用结构标签的典型错误
语义错位会干扰辅助技术、SEO 解析，甚至影响浏览器默认样式继承：
立即学习“前端免费学习笔记（深入）”；
- 用
<header>包裹侧边栏顶部的筛选控件（它不属于该区域的“头部”，只是个功能模块） - 在
<aside>里放<footer>显示“本栏更新时间”——<aside>本身不构成独立内容单元，其<footer>会被误读为整个页面的次要底部 - 为兼容旧浏览器强行降级：现代项目无需因 IE8 放弃语义，用
<div role="banner">或 CSS 重置即可，而非全退回<div>
<!-- ✅ 合理嵌套 -->
<article>
<header>
<h2>如何调试 fetch 错误</h2>
<p><time datetime="2024-06-15">2024年6月15日</time></p>
</header>
<p>fetch 默认不抛出网络错误……</p>
<footer>
<p>编辑：张工 | 标签：#JavaScript #API</p>
</footer>
</article>
<p><!-- ❌ 语义断裂 -->
<div class="sidebar">
<header><h3>热门工具</h3></header>
<ul><li>JSONLint</li></ul>
</div>最常被忽略的一点：浏览器对 <header> 和 <footer> 的默认 display 是 block，但部分旧版 Safari 曾对孤立使用的结构标签应用奇怪的 margin；如果视觉异常，优先检查是否缺失父容器（如没包在 <body> 或 <section> 中），而不是立刻加 display: block 覆盖。
