header 和 footer 可合法嵌套于 article 内，但 header 必须为 article 的第一个子元素且不得被非节元素包裹，footer 必须紧贴 article 结束标签前且后无其他节元素，否则语义断裂。
header 和 footer 可以合法嵌套在 article 内部，但必须满足语义归属和结构边界两个硬性条件——否则浏览器会降级处理，辅助技术可能完全忽略它们。
article 内部的 header 必须是直接子元素
不是“能放就行”，而是 header 必须作为 article 的**第一个子元素**（或紧随其后），且不能被 div、section 等非节元素包裹。否则它就不再属于该 article 的语义上下文。
- ✅ 正确：
<article><header><h2>标题</h2> <time datetime="2026-06-15">6月15日</time></header><p>正文...</p></article> - ❌ 错误：
<article><div class="wrap"><header>...</header></div> <p>正文...</p></article>→header作用域变成div，而div不是节元素，语义断裂 - ⚠️ 注意：一个
article内只能有一个header；重复写两个会被验证器警告，读屏器可能只识别第一个
footer 必须紧贴 article 结束标签前
footer 在 article 里的位置比视觉排版更关键：它必须出现在所有主体内容之后、 之前，中间不能插入其他节元素（如 section 或另一个 article），否则解析器会把它挂到外层作用域。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确：
<article>...<p>最后一段正文</p> <footer><p>作者：张三</p> <time datetime="2026-06-16">编辑于昨日</time></footer></article> - ❌ 错误：
<article>...<footer>...</footer><section><p>相关推荐</p></section></article>→footer仍属article，但section是独立节元素，容易让大纲生成器误判层级 - ⚠️ 注意：
footer子元素应限于元信息类内容（作者、时间、标签、许可说明），避免塞入导航链接或操作按钮——那些更适合放在aside或独立section
嵌套时标题层级与语义冲突怎么避坑
很多人用 h1 塞进 article 的 header，结果整页出现多个 h1，破坏大纲结构。HTML5 允许这么做，但实际效果取决于解析器和辅助工具的实现策略。
- ✅ 推荐做法：在
article内统一用h2～h3，让页面级h1保留在body或全局header中 - ✅
header不强制含 heading 元素：纯作者+时间也可以单独用header包裹，语义依然成立 - ❌ 避免：
<header><h1>标题</h1> <h1>副标题</h1></header>—— 同级h1违反标题层级逻辑，验证器不报错但语义混乱 - ⚠️ 特别注意：嵌套
article（比如评论区）内部再用header，其h2会被视为独立大纲节点，不要指望它自动“缩进”成子级
最容易被忽略的不是“能不能嵌套”，而是“嵌套后是否还被当成这个 article 的一部分”。只要 header 或 footer 被任何非节元素包裹，或者没放在正确的位置边界上，语义就断了——这时候你写的不是 HTML5，只是带 class 的 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
