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

Header 标签可以合法嵌套在 Article 内部,且语义明确、推荐使用。它用于定义 article 级别的标题性内容(如标题、副标题、作者信息、发布日期等),与页面级的 <header></header> 互不冲突,浏览器和辅助技术都能正确识别其作用范围。
Article 内部 Header 的典型用途
Article 中的 <header></header> 不是装饰性容器,而是承载该文章自身的元信息和引导内容:
- 主标题(
<h1></h1>~<h6></h6>)——建议用<h2></h2>或更浅层级,避免破坏整页标题结构 - 副标题或导语(
<p class="subtitle"></p>) - 作者姓名、头像、机构(
<address></address>或普通<p></p>) - 发布/更新时间(
<time datetime="..."></time>) - 分类标签或阅读时长提示(语义化较弱时可用
<div>,但不宜放 header 内) <h3>正确嵌套示例(符合 HTML5 规范)</h3> <p>以下结构完全合法,<code><header></header>是<article></article>的直接子元素:
响应式设计的核心原则
移动优先不是口号……
立即学习“前端免费学习笔记(深入)”;
需要注意的常见误区
-
不要在 header 内放 article 主体内容:正文段落、图片、列表应放在
<header></header>外部 -
避免多层嵌套 header:Article 内只需一个
<header></header>;若需分组,用<section></section>或<div> <li> <strong>标题层级要合理</strong>:Article 内的 <code><h2></h2>应与页面大纲一致;多个 article 并列时,都用<h2></h2>是常规做法 -
header 不必包含标题:纯元信息(如仅作者+时间)也可用
<header></header>,HTML5 规范未强制要求含 heading 元素
与页面级 Header 的关系
页面
<header></header>和 article<header></header>是独立语义单元。前者描述整个页面(如网站 logo、主导航),后者专属于当前文章。两者可同时存在,不会混淆解析逻辑,搜索引擎和读屏软件会根据上下文区分作用域。 -
不要在 header 内放 article 主体内容:正文段落、图片、列表应放在



















