新闻聚合页应以<main>为根容器，每个栏目用带<h2>标题的<section>划分，栏目内多条独立新闻用<article>包裹；单篇长文内部可用带<h3>的<section>分主题模块，纯布局层用<div>。
用 article 和 section 搭建新闻聚合页，核心是分清“内容实体”和“主题容器”的关系：每条新闻是独立可分发的单元，用 article；同类新闻的集合区域（如“国内要闻”“国际快讯”）用 section 包裹。
主结构按语义分层，不为样式套标签
首页主体用 <main> 包裹，内部每个栏目是一个 <section>，必须带标题（<h2> 或更高级别），例如：
<section><h2>头条新闻</h2>...</section><section><h2>财经动态</h2>...</section>- 避免无标题的
section，否则语义失效，等同于滥用div
每个 section 内并列多个 article
一个栏目下展示多条新闻，每条都用 <article> 独立包裹，保证其可单独提取、RSS 推送或搜索引擎索引：
- 每条
article内含<header>（标题、作者、时间）、<p>正文段落、<footer>（来源或相关链接） - 时间用
<time datetime="2026-04-30">4月30日</time>，确保机器可读 - 不要把多个不相关的新闻硬塞进同一个
article—— 它不是布局容器
article 内部可用 section 划分逻辑小节
单篇长新闻正文若含多个主题模块（如“事件背景”“官方回应”“专家解读”），可在 article 内嵌套 section：
立即学习“前端免费学习笔记（深入）”；
- 每个内层
section必须有<h3>或<h4>标题，且不能跳级（article主标题是h2，内部就用h3起） - 这种嵌套表达的是“文章内部的主题分组”，不影响该新闻作为整体的独立性
- 纯为 flex 布局加的包裹层，一律用
div，不强行语义化
SEO 与可访问性关键细节
结构语义直接影响搜索收录和屏幕阅读器播报：
- Google 爬虫会将每个
article当作独立内容块，提升长尾词匹配率 - 文档大纲（document outline）由标题层级自动生成，无标题的
section会让大纲断裂 - 结合 Schema.org 标记（如
itemprop="headline"）能增强富摘要展示
