HTML5中Article内部Header标签的结构嵌套

<header>可合法嵌套在<article>内，用于定义文章级标题、作者、时间等元信息，语义明确且被辅助技术正确识别；典型内容包括<h2>主标题、副标题、<address>作者、<time>发布时间等。

Header 标签可以合法嵌套在 Article 内部，且语义明确、推荐使用。它用于定义 article 级别的标题性内容（如标题、副标题、作者信息、发布日期等），与页面级的 <header> 互不冲突，浏览器和辅助技术都能正确识别其作用范围。

Article 内部 Header 的典型用途

Article 中的 <header> 不是装饰性容器，而是承载该文章自身的元信息和引导内容：

• 主标题（<h1>～<h6>）——建议用 <h2> 或更浅层级，避免破坏整页标题结构
• 副标题或导语（<p class="subtitle">）
• 作者姓名、头像、机构（<address> 或普通 <p>）
• 发布/更新时间（<time datetime="...">）
• 分类标签或阅读时长提示（语义化较弱时可用 <div>，但不宜放 header 内）

正确嵌套示例（符合 HTML5 规范）

以下结构完全合法，<header> 是 <article> 的直接子元素：

<article>
  <header>
    <h2>响应式设计的核心原则</h2>
    <p class="byline">作者：Jane Smith/p>
    <time datetime="2024-04-10">2024年4月10日</time>
  </header>
  <p>移动优先不是口号……</p>
</article>

需要注意的常见误区

• 不要在 header 内放 article 主体内容：正文段落、图片、列表应放在 <header> 外部
• 避免多层嵌套 header：Article 内只需一个 <header>；若需分组，用 <section> 或 <div>
• 标题层级要合理：Article 内的 <h2> 应与页面大纲一致；多个 article 并列时，都用 <h2> 是常规做法
• header 不必包含标题：纯元信息（如仅作者+时间）也可用 <header>，HTML5 规范未强制要求含 heading 元素

与页面级 Header 的关系

页面 <header> 和 article <header> 是独立语义单元。前者描述整个页面（如网站 logo、主导航），后者专属于当前文章。两者可同时存在，不会混淆解析逻辑，搜索引擎和读屏软件会根据上下文区分作用域。

立即学习“前端免费学习笔记（深入）”；