必须作为页面或内容区块的真正头部，承担引导、导航或介绍功能；嵌套过深、包裹过宽或脱离逻辑层级会破坏语义，且与无关。
HTML 的 <header></header> 不是“加个标签就语义化”——它必须是某个 <section></section>、<article></article> 或整个页面的真正头部内容，否则反而破坏语义。
什么时候该用 <header></header> 而不是 <div>
<p>判断标准只有一个：这段内容是否承担「引导性、导航性或介绍性」功能，并且逻辑上属于一个独立内容区块的顶部。</p>
<ul>
<li>✅ 页面最上方的站点名 + 主导航：<code><header></header>（作为
<article></article> 开头的标题 + 作者 + 发布时间：<header></header>（嵌套在 <article></article> 内）<div>，不是语义头部
<li>❌ 列表项里的小标题栏（如评论列表每条评论的顶部）：用 <code><h3></h3> 或 <span></span>，别滥用 <header></header>
<header></header> 里能放什么？哪些内容会削弱语义
它允许包含多个 <h1></h1>–<h6></h6>、<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1072" title="SoundRaw AI"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c94dbfc47596.png" alt="SoundRaw AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1072" title="SoundRaw AI">SoundRaw AI</a>
<p>面向创作者的 AI 音乐生成器，只需选择情绪、流派和长度，SoundRaw AI就能为你生成优美的歌曲。</p>
</div>
<a href="/ai/1072" title="SoundRaw AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<nav></nav>、<img alt="HTML怎么创建语义化头部_HTML header标签教程【结构】" >，但关键限制在于：不能包含另一个 <header></header>，也不该包裹主内容正文。
- ✅ 合理组合：
<h1></h1>+<nav></nav>+<p class="subtitle"></p> - ⚠️ 常见误用：把整段文章摘要塞进
<header></header>，导致屏幕阅读器误判为“头部信息”，跳过实质内容 - ⚠️ 兼容注意：IE8 及更早版本不识别
<header></header>，需配合document.createElement("header")或 HTML5 Shiv 才能触发样式和可访问性支持
和
是文档元信息容器（<title></title>、<meta>、<link>），浏览器不渲染；<header></header> 是页面可见结构元素，出现在 里。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<header>...</header>（语法错误，解析器会自动闭合） - ✅ 正确层级：
<body><header>...</header><main>...</main></body></li> <li>? 检查方法：用浏览器开发者工具选中元素，看其 DOM 位置是否在 <code><body>
下，且不嵌套在或其他非流式容器中
语义是否生效，不取决于你写了几个 <header></header>，而取决于它是否真实对应内容的逻辑层级。嵌套过深、包裹过宽、脱离上下文——这三类问题比“没用 <header></header>”更难被检测，也更容易让辅助技术失效。
