文章列表必须用 article 标签，每个 article 应包含层级合理的标题（如 h2）、header 包裹的元信息（含带 datetime 属性的 time）、p 标签摘要和语义化链接；外层用 main 包裹所有 article，不嵌套 section 或 nav，附属内容用 aside、nav、form 等分离。
文章列表必须用 article，不是 ul 或 div
每篇文章是独立、可分发的内容单元，article 是唯一能准确表达这层语义的标签。用 ul 套标题+摘要，屏幕阅读器会读成“列表项 1”“列表项 2”，完全掩盖了每篇内容的完整性；用 div class="post" 则等于放弃语义，搜索引擎和辅助技术都当它是一块普通容器。
常见错误现象：
- CMS 输出默认用
div包裹每篇文章，再加一堆 class 控制样式 - 为“统一高度”或“网格布局”强行套
ul+li，但里面塞的是完整标题、作者、时间、摘要 —— 这已超出列表语义边界
正确做法：外层用 main（页面主体），内部每个条目用 article，不嵌套、不降级。即使只有标题和链接，也应保有 article 结构，为后续扩展留余地。
article 内部必须包含可识别的标题和元信息
空的 article 没有意义。浏览器大纲算法、RSS 解析器、爬虫都依赖其中的标题（h1–h3）和关键元数据来判断内容价值。没有标题的 article 可能被忽略或降权。
立即学习“前端免费学习笔记（深入）”；
必须包含的最小结构：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 一个层级合理的标题标签（如
h2，因main外可能已有h1） -
header包裹标题和元信息（作者、时间等），避免把time直接丢在段落里 -
time必须带datetime属性，如<time datetime="2026-08-15">8月15日</time>，否则机器不可读 - 摘要用
p，不用div或span；链接用a包裹整个卡片或明确指向正文
列表页整体结构：用 main 包裹所有 article，别用 section
section 表示同一主题下的逻辑分组，比如“技术文章”“产品更新”两个栏目并列时才各自用 section。纯文章列表页本身就是一个主内容流，直接用 main 即可 —— 它语义清晰、大纲权重高，且每个浏览器都按单主体处理。
容易踩的坑：
- 在外层加
section再包main：多余嵌套，破坏大纲层级 - 把整页列表当成一个
article：错把“集合”当“单篇”，语义倒置 - 用
nav包列表：导航是跳转入口，不是内容容器；分页控件才放nav
性能与兼容性影响极小，现代浏览器（Chrome/Firefox/Safari）对 main + article 的大纲解析已稳定。IE9 及以下可忽略 —— 若真需支持，用 ARIA role="main" 和 role="article" 替代，而非强依赖标签名。
侧边栏、分页、筛选器别塞进 main 里
main 只承载核心文章流。相关推荐、分类筛选、作者简介这些附属内容，该用 aside 就用 aside，该用 nav 就用 nav。混在一起会导致：
- 屏幕阅读器无法快速定位主内容（
main被稀释） - RSS 订阅器提取时误吞筛选控件 HTML
- SEO 工具难以区分“主干内容”和“周边信息”
分页控件建议单独用 nav 包裹，并加 aria-label="文章列表分页"；筛选表单用 form，不要用 div + JS 模拟。所有这些，都不影响 main 内部的干净结构。
