聚合页中每个带明确主题的栏目容器（如“国内要闻”）必须用section，且须配h2级标题；无标题的section语义失效，不被屏幕阅读器识别，seo亦无结构信号。

聚合页里哪些区块必须用 section？

聚合页中，每个带明确主题的栏目容器必须用 section，且不能省略标题。比如「国内要闻」「国际快讯」「科技前沿」这些并列栏目，各自是一个逻辑分组，脱离首页就失去上下文意义——它们不是独立内容，只是页面内的主题归类。

常见错误是给栏目加了 section 却没配 <h2></h2>：浏览器和屏幕阅读器会直接忽略这个区块，无障碍树里不出现，SEO 也收不到结构信号。

• section 必须包含 <h2></h2> 或更高级别标题（不能跳级，如父级是 <h1></h1>，子 section 就用 <h2></h2>）
• 栏目内若只有一条新闻，仍用 section 包裹，但里面要放 article，而不是直接把新闻内容塞进 section 里
• 避免用 section 包导航栏、轮播图或页脚——它们该用 <nav></nav>、<div>、<code><footer></footer>

  什么情况下必须用 article 而不是 section？

  每条新闻、每篇博客摘要、每条用户评论，只要满足“摘出来发到 RSS 或转发到社交平台仍能看懂”，就必须用 article。它不是样式容器，而是告诉机器：“这条内容可单独索引、推送、缓存”。

  典型误用：把「相关推荐」列表里的每篇文章都套 div 或 section——结果 RSS 解析器一条都抓不到，搜索引擎也不认为这是独立内容单元。

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • article 内部应含 <header></header>（至少一个 <h2></h2> 标题）、<time datetime="..."></time> 和可选的 <footer></footer>
  • 同一 section 下并列多个 article 是标准做法；反过来，一个 section 里只包一个 article 且无额外主题包装，属于冗余嵌套
  • 不要给图片卡片、标签云、筛选控件套 article——它们不具备独立语义，用 div 更诚实

  article 嵌套 section 的边界在哪？

  单篇长新闻内部划分「事件背景」「官方回应」「专家观点」等模块时，可以在 article 内嵌套 section，但每层 section 都得有自己的标题（<h3></h3> 起），且不能跳过层级。这种嵌套表达的是“同一篇内容的子主题”，不是“多个内容拼在一起”。

  容易踩坑的是在 article 里硬塞一个「延伸阅读」列表，每条又用 article——这实际是两个独立内容单元混在一个 article 里，破坏了可分发性。

  • 内层 section 的 <header></header> 描述的是该小节自身，不是外层文章
  • article 里允许有 aside（如作者简介）、footer（来源链接），但不要让它们和 section 的语义冲突
  • 如果某段内容只是加个边框或 margin，别用 section——div + class 才是正确选择

  兼容性和工具链里最容易被忽略的点

  IE8 及更早版本根本不识别 article 和 section，连 DOM 树里都不存在。如果项目还要支持这类环境，光靠 document.createElement('article') 不够，得配合 CSS 重置和 ARIA role 补偿（比如 role="article"），否则读屏软件完全无法感知结构。

  真正难调试的不是单个标签写法，而是整页大纲是否符合预期：打开 Chrome DevTools → Elements 面板 → 右键检查 → “Accessibility” 标签页，看生成的文档结构树是不是你设想的样子。不是？那就得重构，而不是加更多 class 或 inline style。