<header> 是成组性内容区块的页眉区域，非小标题或作者专用标签；可嵌套于 <section> 等元素内代表该节页眉，须配合 <h1>–<h6> 体现标题层级，作者信息宜用 <p class="byline"> 或 <address> 等语义化标签。
HTML5 中的 <header> 标签**不是用来定义“小标题”或“作者信息”的语义容器**，而是一个**成组性内容区块的页眉区域**。它通常包含该区块的标题（如 <h1>–<h6>）、logo、导航链接等，但本身不承载标题级别或作者语义。
正确理解 <header> 的作用范围
<header> 可以出现在整个页面顶部（作为 <body> 的页眉），也可以嵌套在 <section>、<article>、<aside> 等分节元素内部——此时它代表**该节自身的页眉**，而非“小标题”标签。
- 每个
<section>内部可有一个<header>，用于包裹该节的标题、副标题、作者、日期等元信息 -
<header>本身没有层级含义，标题级别必须由<h1>–<h6>明确体现（推荐按文档结构降级使用<h2>、<h3>等） - 作者信息应使用语义化标签表达：
<address>（适用于联系信息）、<span>+class或微数据（如itemprop="author"）更合适
在 Section 内用 header 包裹标题与作者的规范写法
以下是一个符合 HTML5 语义的最佳实践示例：
<section>
<header>
<h2>响应式设计的核心原则</h2>
<p class="byline">作者：张明 ｜ 发布时间：2024-04-10</p>
</header>
<p>移动优先……</p>
</section>
-
<h2>表示该节的主标题（若 section 是文章子章节，h2 合理；若嵌套更深，可用 h3/h4） - 作者和时间放在
<p class="byline">中是常见且语义清晰的做法；避免滥用<div>或无意义标签 - 如需机器可读的作者信息，可增强为：
<p class="byline" itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">张明</span></p>
不推荐的错误用法
以下写法违背 HTML5 语义或规范：
立即学习“前端免费学习笔记（深入）”；
- 把
<header>当作“小标题标签”直接替代<h3>：<header>简介</header>❌（缺少标题层级，屏幕阅读器无法识别为标题） - 在
<header>里只放作者名，不带任何标题：<header><p>李华</p></header>❌（header 应有“页眉”功能，孤立作者信息建议用<address>或普通段落） - 多个
<header>嵌套在同一个<section>里（除非有明确分组需求，如带副标题+工具栏）
补充：作者信息的其他语义选项
根据上下文，还可选择更精准的标签：
- 若作者是整篇文章责任人，且出现在
<article>顶部，可用<address>（仅限联系信息场景）：<address class="author">作者：王芳 <a href="mailto:wang@example.com">wang@example.com</a></address> - 纯展示型作者行，推荐用带 class 的
<p>或<footer>（如果位于 section 底部） - 结合 Schema.org 结构化数据，提升搜索引擎对作者的识别能力
