必须用<main>包裹列表页主体，每个条目必须用<article>；<main>标识唯一核心内容区，<article>确保每条新闻/博客可独立分发、SEO索引和无障碍访问。
文章列表页该用 还是 包裹？
必须用 <main></main>，不能用 <section></section> 或 <div>。因为列表页的主体内容（即所有文章条目）是整页唯一的核心信息流，<code><main></main> 的语义就是“页面主要、不可替代的内容区域”，搜索引擎和屏幕阅读器都依赖它定位主干内容。
常见错误是把整个列表包进 <section></section> ——这会暗示“这只是页面的一个逻辑子块”，导致 SEO 权重稀释、读屏器跳过主内容。如果页面还有侧边栏或广告区，它们应放在 <main></main> 外部，用 <aside></aside> 单独包裹。
每篇文章条目必须用 吗？
是的，只要每条是独立、可分发、有自己标题/时间/作者的完整内容单元，就必须用 <article></article>。比如博客列表、新闻聚合页、论坛帖子页。
容易踩的坑：
- 用 <div class="post"> 替代 <code><article></article>：失去语义，RSS 解析失败，无障碍支持断裂
- 在 <article></article> 内部用 <h2></h2> 做文章标题：正确，但前提是该页没有其他更高层级的 <h1></h1> 干扰大纲（比如页面顶部已有 <h1>最新文章</h1>，那列表里每篇仍应从 <h2></h2> 开始）
- 把摘要段落直接塞进 <article></article> 而不加 <p></p>：虽然合法，但破坏段落语义，影响文本可读性和样式复用
立即学习“前端免费学习笔记（深入）”；
列表容器用 还是 ？用 <ul></ul> 更合理——前提是这些文章条目在逻辑上构成一个“无序集合”，没有固定顺序依赖（如非时间倒序、非权重排序）。<ul></ul> 明确表达“并列、同级、可遍历”的关系，对键盘导航和屏幕阅读器更友好。
但要注意：
- 不要为了用 <ul></ul> 而强行套用：如果列表是瀑布流或 Masonry 布局，CSS Grid/Flex 已接管视觉排列，<ul></ul> 依然可用，不影响布局
- 每个 <li> 必须直接包裹一个 <article></article>，不要中间插 <div>：<code><li><article>https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</article></li> 是干净结构
- 如果列表有分页控件（如“上一页 / 下一页”），它不属于 <ul></ul>，应放在 <ul></ul> 外部、<main></main> 内部的底部位置，用 <nav aria-label="文章列表分页"></nav> 包裹
元信息（时间、作者、分类）怎么放才机器可读？
全部放进 <article></article> 内部的 <header></header>，用 <time datetime="2026-08-25"></time> + <dl></dl> 组织。
示例结构：
<article>
<header>
<h2>标题</h2>
<dl>
<dt>作者</dt><dd>张三</dd>
<dt>发布时间</dt><dd><time datetime="2026-08-25">8月25日</time></dd>
</dl>
</header>
<p>摘要文字https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</p>
</article>
关键点：
- <time></time> 的 datetime 属性必须是机器可解析格式（ISO 8601），不能只写“今天”或“3小时前”
- 分类标签建议用 <ul class="categories"></ul>，每个 <li> 里放 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></a>，别用 <span></span> 模拟链接
- 避免把元信息堆在文章末尾或用 CSS 浮动到右侧——语义位置比视觉位置更重要
最常被忽略的是：列表页的 <main></main> 和每个 <article></article> 共同构成一个嵌套大纲，浏览器开发者工具的“Accessibility”面板能立刻暴露是否断裂。一旦 <article></article> 缺失或嵌套错位，整页的语义链就断了，后续所有优化都打折扣。
用 <ul></ul> 更合理——前提是这些文章条目在逻辑上构成一个“无序集合”，没有固定顺序依赖（如非时间倒序、非权重排序）。<ul></ul> 明确表达“并列、同级、可遍历”的关系，对键盘导航和屏幕阅读器更友好。
但要注意：
- 不要为了用 <ul></ul> 而强行套用：如果列表是瀑布流或 Masonry 布局，CSS Grid/Flex 已接管视觉排列，<ul></ul> 依然可用，不影响布局
- 每个 <li> 必须直接包裹一个 <article></article>，不要中间插 <div>：<code><li><article>https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</article></li> 是干净结构
- 如果列表有分页控件（如“上一页 / 下一页”），它不属于 <ul></ul>，应放在 <ul></ul> 外部、<main></main> 内部的底部位置，用 <nav aria-label="文章列表分页"></nav> 包裹
元信息（时间、作者、分类）怎么放才机器可读？
全部放进 <article></article> 内部的 <header></header>，用 <time datetime="2026-08-25"></time> + <dl></dl> 组织。
示例结构：<article> <header> <h2>标题</h2> <dl> <dt>作者</dt><dd>张三</dd> <dt>发布时间</dt><dd><time datetime="2026-08-25">8月25日</time></dd> </dl> </header> <p>摘要文字https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</p></article>
关键点：
- <time></time> 的 datetime 属性必须是机器可解析格式（ISO 8601），不能只写“今天”或“3小时前”
- 分类标签建议用 <ul class="categories"></ul>，每个 <li> 里放 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"></a>，别用 <span></span> 模拟链接
- 避免把元信息堆在文章末尾或用 CSS 浮动到右侧——语义位置比视觉位置更重要
最常被忽略的是：列表页的 <main></main> 和每个 <article></article> 共同构成一个嵌套大纲，浏览器开发者工具的“Accessibility”面板能立刻暴露是否断裂。一旦 <article></article> 缺失或嵌套错位，整页的语义链就断了，后续所有优化都打折扣。
