不是“网页最上面那条横条”的语义替身，仅当包裹含标题（如）、导航、作者信息等引导性内容时才合法；纯样式需求（如背景色、fixed定位）应使用，且禁止嵌套或空泛使用。

<header></header> 不是“网页最上面那条横条”的语义替身，它只在包裹真正承担引导性或导航性内容时才合法——比如含 <h1></h1> 的站点标题、文章开头的 <h2></h2> + 作者信息，或 <section></section> 自带的标题区。单纯为加背景色、fixed 定位或清浮动而套一层，属于误用。

什么时候必须用 <header></header> 而不是 <div> <p>关键看内容是否构成某个「语义区块的头部上下文」：</p> <ul> <li>页面级：含 <code><h1></h1> + <nav></nav> + logo（带 alt）+ 搜索框 → 合法 <header></header>

文章级：某 <article></article> 开头有 <h2></h2> + <p class="author"></p> + <time></time> → 应嵌一个 <header></header>

<section></section> 开头有 <h3></h3> 和简短导语 → 可用 <header></header> 包裹

仅含轮播图、广告横幅、登录按钮弹窗 → ❌ 禁止用 <header></header>，改用 <div> 或更精确的 <code><section></section>

为了清浮动、加 padding、设 position: fixed → ❌ 这是样式需求，不是语义需求

<header></header> 里能放什么、哪些写法直接破坏语义

它允许常见流内容，但有硬性边界：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• ✅ 允许：<h1></h1>–<h6></h6>、<nav></nav>、<p></p>、<img>（如 logo）、<form></form>（如搜索框）
• ❌ 禁止嵌套另一个 <header></header>：例如 <header><header><h1>标题</h1></header></header> —— 浏览器会忽略内层语义，读屏器可能误判层级
• ❌ 禁止空泛使用：只放一个 <button></button>、单独 <form></form> 或纯 <div class="logo">，没标题也没导航意图，等于没提供结构信号 <li>⚠️ 注意：<code><header></header> 默认无样式，不带 margin 或 padding，所有布局需显式定义；IE9+ 需 html5shiv 或 document.createElement('header') 才能识别 CSS 选择器

移动端 fixed 定位的 <header></header> 容易出什么问题

这不是标签本身的问题，而是布局逻辑与平台行为冲突：

• iOS Safari 中，position: fixed 的 <header></header> 可能触发滚动穿透（底层内容仍可拖动）
• 软键盘弹出时，fixed 元素可能失焦或错位，尤其当它包含输入框时
• 推荐替代方案：position: sticky（配合 top: 0）更稳妥；若必须用 fixed，需 JS 监听 focus/blur 补偿定位
• 不要写 <header class="header"></header> 这种冗余 class —— 标签已表达语义，class 只用于样式钩子，如 header.site-header

最容易被忽略的一点：单独扔一个 <header></header> 在 底下，又不包裹任何节元素（如 <article></article> 或 <section></section>），它的语义归属就悬空了——浏览器和读屏器无法判断它服务的是哪个内容单元。