header 标签作为页眉与 article 标题头部的区分-H5教程-PHP中文网

是语义容器而非视觉定位标签，必须包裹显式标题（h1–h6）以表明引导性内容：整站页眉含h1及导航，文章页眉用h2级标题聚合元数据，section页眉用于带标题的逻辑分段，纯样式或无标题使用属误用。

header 标签作为页眉与 article 标题头部的区分

<header></header> 标签不是“页面最上面那条横条”的代名词，而是语义容器——它只在包裹真正承担「引导性内容」时才该出现。关键不在位置，而在内容是否构成某个区块的头部上下文。

页眉级 <header></header>（整站或区域）必须含显式标题
这是页面或站点层面的引导入口，需明确回答“这是谁的页面、主题是什么”：

必须包含且仅有一个 <h1></h1> 到 <h6></h6>，不能藏在 <div> 或 <code><nav></nav> 里
推荐用 <h1></h1> 表示站点名，如 <h1>我的博客</h1>
可同时包含 logo（带 alt）、主导航 <nav></nav>、搜索表单 <form role="search"></form>
错误示例：<header><nav>...</nav></header>（无标题 → 辅助技术无法识别上下文）

文章级 <header></header>（嵌在 <article></article> 内）用于元数据聚合
它属于内容块自身的头部信息，与整站页眉完全独立，互不干扰：

用 <h2></h2> 或更低位阶标题（避免破坏文档层级）
常见内容：文章标题、作者、发布时间、分类标签等

示例：

<article><header><h2>夏季防蚊指南</h2>
    <p class="author">张医生</p>
    <time datetime="2026-06-20">2026年6月20日</time></header><p>蚊子活跃期……</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/4202" title="ClickPrompt"><img
														src="https://img.php.cn/upload/ai_manual/001/246/273/178599613815008.png" alt="ClickPrompt" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/4202" title="ClickPrompt" class="overflowclass">ClickPrompt</a>
													<p class="overflowclass">ClickPrompt是一款AI图像与设计工具，在线AI提示词设计工具。</p>
												</div>
												<a rel="nofollow" href="/ai/4202" title="ClickPrompt" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</article>

section 级 <header></header> 适用有标题的逻辑分段
比如一篇教程中“安装步骤”“配置说明”这类带小标题的区块：