新闻列表页必须用<main>包裹全部新闻项且每条新闻必须是其直接子元素，因规范强制要求<main>唯一且不得嵌套中间容器；<article>标识独立可分发新闻单元，<time>的datetime属性须为ISO 8601格式。
新闻列表必须用 <main></main> 包裹，且每条新闻必须是它的直接子元素
不是“推荐”，是规范强制要求：<main></main> 必须唯一，且所有新闻条目（即 <article></article>）必须直接挂载在它下面，中间不能插 <section></section>、<div> 或任何容器。
<p>常见错误包括：</p>
<ul><li>把 <pre class="brush:php;toolbar:false;"><section id="news-list"></section></li>
<li>用 <code><div class="news-wrapper"></div></li>
</ul>
<p>这两种写法会让屏幕阅读器丢失主内容上下文，搜索引擎也无法准确定位主体内容。正确结构只有一层：<code><main></pre> → 多个 <code><article></article>。
每条新闻必须用 <article></article>，不能用 <div> 或 <code><section></section>
<article></article> 表示独立、完整、可被单独分发或重用的内容单元——新闻条目天然符合这一语义。而 <section></section> 仅表示文档中的逻辑区块（比如“国内新闻”“国际新闻”这类分类标题下的集合），不能替代单条新闻的独立性。
立即学习“前端免费学习笔记（深入）”；
关键区别：
-
<article></article>可以脱离当前页面被 RSS 抓取、被分享链接、被缓存为独立资源；<section></section>不具备这个能力 -
<article></article>内部可自带<header></header>、<footer></footer>、<time></time>，形成自包含语义闭环；<div> 完全无此能力 <li>辅助技术（如读屏软件）会把每个 <code><article></article>当作一个可跳转、可标记的“内容项”，<div> 则被忽略为普通容器 <h3> <code><time datetime></time>的值必须是 ISO 8601 格式，不能写“今天”或“2小时前”<time></time>的datetime属性不是给人看的，是给机器解析用的。浏览器、爬虫、RSS 阅读器都依赖这个属性做时间排序、归档、提醒等操作。合法写法示例：
<time datetime="2026-08-25T14:22:00+08:00">今天 14:22</time>
非法写法（会导致机器无法解析）：
<time datetime="今天">今天</time><time datetime="2小时前">2小时前</time>-
<time datetime="2026/08/25">2026年8月25日</time>（缺时分秒和时区）
分页导航必须用
<nav aria-label="新闻列表分页"></nav>，不能塞进<header></header>或<footer></footer>分页不是页眉或页脚的附属内容，它是与新闻流平级的独立导航功能模块。把它放进
<header></header>会导致键盘用户 Tab 键跳过它，放进<footer></footer>则会被读屏器识别为“版权信息之后的次要内容”。正确位置有两种：
- 作为
<main></main>的兄弟元素，紧跟在它后面（最推荐） - 放在
<main></main>底部，但仍是独立的<nav></nav>，不嵌套在其他语义标签内
注意：
aria-label是补救手段，不是替代方案；真正起作用的是<nav></nav>自身的语义。最容易被忽略的一点：语义化不是“加了标签就完事”。
<article></article>如果没配<time datetime></time>、没用<header></header>包标题、没设<footer></footer>放来源，它的语义完整性就打折扣——机器能识别“这是条新闻”，但无法确认“它何时发布、来自哪里、是否权威”。
