不是“网页最上面那条横条”的语义替身，仅当包裹含标题（如）、导航、作者信息等引导性内容时才合法；纯样式需求（如背景色、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> 里能放什么、哪些写法直接破坏语义
它允许常见流内容，但有硬性边界：
- ✅ 允许：
<h1></h1>–<h6></h6>、<nav></nav>、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<img alt="如何在HTML中使用 header 标签定义页面头部" >（如 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 选择器 - iOS Safari 中，
position: fixed的<header></header>可能触发滚动穿透（底层内容仍可拖动） - 软键盘弹出时，
fixed元素可能失焦或错位，尤其当它包含输入框时 - 推荐替代方案：
position: sticky（配合top: 0）更稳妥；若必须用fixed，需 JS 监听focus/blur补偿定位 - 不要写
<header class="header"></header>这种冗余 class —— 标签已表达语义，class 只用于样式钩子，如header.site-header
移动端 fixed 定位的 <header></header> 容易出什么问题
这不是标签本身的问题，而是布局逻辑与平台行为冲突：
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：单独扔一个 <header></header> 在 底下，又不包裹任何节元素（如 <article></article> 或 <section></section>），它的语义归属就悬空了——浏览器和读屏器无法判断它服务的是哪个内容单元。
