论坛每条帖子必须用 article 标签，因其语义明确标识独立可引用内容；需含 h1–h6 或 header，元信息置内部，子回复用 article 加 aria-labelledby，禁用冗余 section 包裹。
论坛每条帖子必须用 article，不是 div
浏览器、SEO 爬虫和屏幕阅读器靠 article 识别“这是一条可独立引用、存档、订阅的内容”，而不是一堆视觉上像卡片的 div。一旦全用 div class="post"，后续想用 CSS 选择器批量提取所有帖子的发布时间（time[datetime]）或作者链接（a.author），就得写一堆冗余属性或 JS 遍历——因为语义层已经塌了。
必须满足两个硬条件：
-
article内至少含一个标题级元素（h1–h6）或header - 如果帖子支持编辑记录、最后回复时间等元信息，应放在
article内部，而非外层容器里
嵌套回复（楼中楼）也用 article，但要加 aria-labelledby
子回复不是“装饰”，而是与父帖强关联的独立内容单元。直接套 div 或 section 会让辅助技术丢失上下文；用 article 并配 aria-labelledby="post-123"（指向父帖的 id），才能让屏幕阅读器读出“回复：楼主在 2024-05-20 发的帖子”。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 在外层再包一层
section或div—— 多余结构会稀释语义层级 - 把子回复放进
aside——aside是“几乎无关”的辅助内容，而楼中楼是核心互动 - 省略
aria-labelledby—— 没它，子回复就变成孤立片段，无法锚定来源
section 只用于逻辑区块，比如「精华帖」「最新回复」列表
section 不是“看起来像卡片就用”，而是“有明确主题 + 可独立命名 + 内容围绕同一目的组织”的区域。论坛首页常见的三个区块，适合这样写：
<section aria-labelledby="top-posts-header"> <h2 id="top-posts-header">精华帖</h2> <article>...</article> <article>...</article> </section>
但别给每条普通帖子单独加一层 section 包裹——那会让 DOM 层级过深，且破坏 article 的独立性。如果只是按时间排序的常规列表，直接用 main + 多个 article 更干净。
时间、作者、编辑记录这些元数据，必须用语义化标签包裹
发布时间不能只写 “2024-05-20”，得用 time 标签并带 datetime 属性；作者名不能只是 span，最好套 a 并加 rel="author"；编辑记录建议用 details/summary 折叠，避免干扰主阅读流。
关键点：
-
<time datetime="2024-05-20T14:30">5月20日</time>—— 机器可解析，用户可读 - 作者链接：
<a href="/u/abc" rel="author">张三</a>—— 明确关系，利于 SEO 和 a11y - 编辑记录：
<details><summary>编辑记录</summary>2024-05-21 10:12 由管理员修改</details>—— 不占默认视图，又保留可访问性
最容易被忽略的是：右侧全局侧边栏（如热门版块、在线人数）绝不能塞进某个 article 或 section 里——它不属于任何单条帖子，该放 main 外，用 aside 或普通 div 即可。
