<article>是组织独立可分发内容的语义刚需，用于博客正文、评论、产品卡片等；<section>仅作逻辑分组，如长文中的“背景”“方法”部分；每个<article>可含独立<header><footer>，嵌套宜扁平，多<article>共存时<h1>不冲突。
<article> 是组织单篇博客或新闻内容的最小语义单元，不是可选装饰，而是结构刚需。用 <div> 套一堆 <p> 和 <h2>，等于把文章塞进无标签信封——机器读不懂，屏幕阅读器跳过，SEO 权重稀释。
什么时候必须用 <article> 而不是 <section>
<article> 表示能独立存在、可被分发、复用的内容块；<section> 只是逻辑分组，不能脱离上下文独立理解。
- 博客正文、用户评论、产品卡片 —— 用
<article> - 一篇长文中“背景”“方法”“结论”三个部分 —— 用
<section> - 首页上并列的三篇最新文章 —— 每篇都应包裹在独立的
<article>中，外层用<main>或<section>统一管理
<header> 和 <footer> 在文章内部怎么用
别只在页面最外层用 <header>。每篇 <article> 内部都可以有自己的 <header>（放标题、作者、时间）和 <footer>（放标签、分享按钮、相关链接）。
常见错误：
– 把发布时间写成普通 <p>，应使用 <time datetime="2026-04-29">4月29日</time>
– 用 <div class="author"> 代替 <header>，失去语义锚点
– <footer> 放在 <article> 外面，导致辅助技术无法关联到对应文章
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
嵌套层级超过 4 层就该警惕
HTML 结构不是越深越“专业”，而是越扁平越可靠。一个典型健康结构是：
<main>
<article>
<header><h1>标题</h1><time>...</time></header>
<figure><img><figcaption>...</figcaption></figure>
<p>段落</p>
<section><h2>小节标题</h2><p>内容</p></section>
<footer><ul class="tags">...</ul></footer>
</article>
</main>
注意：
– <main> 下直接跟 <article>，不加额外 <div>
– <section> 出现在 <article> 内部，而非替代它
– 所有标题（<h1>–<h6>）必须按逻辑顺序嵌套，不能跳级（如 <h1> 后直接 <h3>）
最容易被忽略的是：同一页面中多个 <article> 的 <h1> 并不冲突——每个 <article> 构成独立大纲上下文，浏览器和读屏软件会分别处理。硬要统一成 <h2> 反而破坏语义。
