新闻列表页必须用<main>包裹全部新闻项，因为规范要求所有新闻条目必须是<main>的直接子元素，嵌套中间容器会破坏语义化与可访问性；<article>用于每条独立新闻，<header><footer>推荐用于元信息，<time>需带ISO 8601格式datetime属性。
新闻列表页为什么必须用 <main></main> 包裹全部新闻项
因为规范强制要求：整个页面的新闻内容必须且只能在一个 <main></main> 元素内，且所有新闻条目（<article></article>）必须是它的直接子元素。嵌套在 <section></section> 或 <div> 里再塞进 <code><main></main>，就违反了可访问性与语义化底线。
常见错误包括：
- 把
<section id="newsList"></section>当成容器，再往里 append<article></article>—— 这会让屏幕阅读器丢失主内容上下文 - 用
<div class="news-wrapper"></div>套住所有新闻，再放进<main></main>——<main></main>的语义被稀释，SEO 和辅助技术无法准确定位主体
正确做法是让每个 <article></article> 直接挂载在 <main></main> 下，不隔任何中间容器。
<article></article> 里要不要强制套 <header></header> 和 <footer></footer>
不是必须，但推荐在有明确元信息时使用——比如发布时间、来源、作者、分类标签。这些信息天然属于“文章头部”或“文章尾部”的语义范畴。
立即学习“前端免费学习笔记（深入）”；
典型结构示例：
<article>
<header>
<h2>国产大飞机C919完成首次商业飞行</h2>
<time datetime="2026-01-04T08:30:00+08:00">2026年1月4日 08:30</time>
</header>
<p class="summary">2026年1月4日,东航MU789航班从上海虹桥飞往北京首都…</p>
<footer><small>来源：新华社</small></footer>
</article>
注意：<time></time> 的 datetime 属性必须是 ISO 8601 格式，否则机器无法解析；显示文本可以本地化，但属性值不能写“昨天”或“刚刚”。
<nav aria-label="新闻列表分页"></nav> 为什么不能用 <div> 替代
<p>因为分页不是普通布局区块，而是具有明确导航意图的交互区域。用 <code><div> 会丢失语义，导致键盘用户无法通过 <code>Tab 快速定位，屏幕阅读器也无法告知“这是新闻列表的分页控件”。
关键点：
-
aria-label是补救手段，不是替代方案；真正该做的是用<nav></nav>本身承载语义 - 不要把分页塞进
<header></header>或<footer></footer>里凑数——它和新闻流平级，应作为<main></main>的兄弟元素，或放在<main></main>底部但仍是独立<nav></nav> - 如果只有“加载更多”按钮而无传统页码，仍建议用
<nav></nav>包裹，并加aria-live="polite"提示加载状态
为什么 <figure></figure> 比裸 <img> 更适合新闻配图
因为新闻图片往往承担说明、佐证、甚至叙事功能，不是装饰性元素。<figure></figure> 明确告诉浏览器：“这张图和它旁边的 <figcaption></figcaption> 是一个逻辑单元”，搜索引擎和阅读器能据此建立图文关联。
例如：
<figure> <img src="c919.jpg" alt="C919客机起飞瞬间"> <figcaption>2026年1月4日，东航MU789航班从上海虹桥机场起飞。</figcaption> </figure>
对比裸 <img>：
- 缺少对图片内容的结构化描述能力
-
alt只能表达“是什么”，无法表达“为什么放这张图”或“图中发生了什么” - 响应式处理时，
<figure></figure>更容易统一控制宽高比与居中行为
最容易被忽略的一点：新闻列表页里每条 <article></article> 中的配图，只要非纯装饰用途，都该走 <figure></figure> 路线——哪怕只有一张图、没有 <figcaption></figcaption>，也建议保留空 <figure></figure> 容器，为后续扩展留语义接口。
