新闻聚合页应以为根容器，每个栏目用带标题的划分，栏目内多条独立新闻用包裹；单篇长文内部可用带的分主题模块，纯布局层用。

用 article 和 section 搭建新闻聚合页，核心是分清“内容实体”和“主题容器”的关系：每条新闻是独立可分发的单元，用 article；同类新闻的集合区域（如“国内要闻”“国际快讯”）用 section 包裹。

主结构按语义分层，不为样式套标签

首页主体用 <main></main> 包裹，内部每个栏目是一个 <section></section>，必须带标题（<h2></h2> 或更高级别），例如：

• <section><h2>头条新闻</h2>...</section>
• <section><h2>财经动态</h2>...</section>
• 避免无标题的 section，否则语义失效，等同于滥用 div

每个 section 内并列多个 article

一个栏目下展示多条新闻，每条都用 <article></article> 独立包裹，保证其可单独提取、RSS 推送或搜索引擎索引：

anything-to-html

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

下载

• 每条 article 内含 <header></header>（标题、作者、时间）、<p></p> 正文段落、<footer></footer>（来源或相关链接）
• 时间用 <time datetime="2026-04-30">4月30日</time>，确保机器可读
• 不要把多个不相关的新闻硬塞进同一个 article —— 它不是布局容器

article 内部可用 section 划分逻辑小节

单篇长新闻正文若含多个主题模块（如“事件背景”“官方回应”“专家解读”），可在 article 内嵌套 section：

• 每个内层 section 必须有 <h3></h3> 或 <h4></h4> 标题，且不能跳级（article 主标题是 h2，内部就用 h3 起）
• 这种嵌套表达的是“文章内部的主题分组”，不影响该新闻作为整体的独立性
• 纯为 flex 布局加的包裹层，一律用 div，不强行语义化

SEO 与可访问性关键细节

结构语义直接影响搜索收录和屏幕阅读器播报：

• Google 爬虫会将每个 article 当作独立内容块，提升长尾词匹配率
• 文档大纲（document outline）由标题层级自动生成，无标题的 section 会让大纲断裂
• 结合 Schema.org 标记（如 itemprop="headline"）能增强富摘要展示

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！