应使用<article>标记每条独立帖子，因其语义明确、利于SEO和无障碍访问；嵌套回复也用<article>并配aria-labelledby；<aside>仅放与当前帖强相关的辅助信息，如编辑记录；<section>按逻辑功能区块划分，非视觉样式；时间用<time datetime>，作者联系用<address>。
用 <article> 包每条帖子，别套 <div>
论坛里每条独立帖子本质是“可单独分发、引用、存档的内容单元”，<article> 正是为此设计。浏览器和读屏器能据此识别内容边界，SEO 也能更好提取标题与发布时间。
常见错误是全用 <div class="post"> 套死，结果语义丢失，后续想用 CSS 选择器批量操作发布时间或作者信息时反而更麻烦。
-
<article>必须包含至少一个<header>（含标题）或<h1>–<h6> - 如果帖子支持嵌套回复（如楼中楼），子回复也用
<article>，但需加aria-labelledby指回父帖 ID - 避免在
<article>外再包一层无意义的<section>—— 它不是“视觉分组”标签，而是逻辑分区容器
<aside> 只放与当前帖子强相关的辅助信息
很多人把右侧用户头像栏、版规链接、在线人数全塞进 <aside>，这是错的。<aside> 应只承载“对当前 <article> 起补充说明作用”的内容，比如该帖的「编辑记录」「相关话题推荐」「作者历史高赞帖」。
全局侧边栏（如导航、广告、登录框）不属于任何单个帖子，必须放在 <main> 外，用 <nav> 或普通 <div>，否则会干扰屏幕阅读器对主内容流的判断。
立即学习“前端免费学习笔记（深入）”；
- 正确：帖子页右侧显示「本帖被 3 人收藏｜最后编辑于 2024-05-20」→ 放
<aside> - 错误：整个页面右侧固定「热门版块」「友情链接」→ 放
<div role="complementary">或直接<div> -
<aside>内不要放表单、按钮等交互主控件，它不是操作区
<section> 按功能区块切，不是按视觉样式切
论坛首页或版块页常有「最新回复」「精华帖」「置顶帖」三个区域，它们适合用 <section>，因为每个都是逻辑上独立的主题集合。但别为了“看起来像卡片”就给每个帖子加一层 <section> —— 那会稀释结构层次，让辅助技术难以聚焦。
关键看是否满足：有明确主题 + 可独立标题 + 内容围绕同一目的组织。不满足就用 <div> 更干净。
- 「置顶帖」区块：用
<section aria-labelledby="sticky-header"><h2 id="sticky-header">置顶帖</h2>...</section> - 每条帖子内部的「评论列表」：用
<section aria-labelledby="comments-header">，而非<div> - 别用
<section>替代 CSS Grid/Flex 的布局容器 —— 结构和样式职责要分开
用 <time datetime> 和 <address> 明确表达元数据
发帖时间、最后回复时间、作者联系方式（非邮箱，指站内私信入口）这些信息，HTML5 提供了原生语义标签，不用靠 class 名模拟。用了，搜索引擎和插件（如日历订阅扩展）才能自动识别。
特别注意 <address>：它**只适用于最近的 <article> 或 <body> 级别的联系信息**，不是所有“地址”都适用。论坛里它最常出现在帖子底部，表示“此帖作者的可联络方式”。
- 时间必须带
datetime属性，格式为YYYY-MM-DDThh:mm:ss±hh:mm，例如：<time datetime="2024-05-19T14:22:00+08:00">昨天 14:22</time> -
<address>里可以放<a href="/msg/123">发私信</a>，但不能放「北京市朝阳区某某路」—— 那是地理地址，不是联系途径 - 避免用
<span class="author">包作者名；改用<footer><address><a href="/u/abc">abc</a></address></footer>
<article>
<header>
<h2>为什么 useEffect 里不能直接写 async 函数？</h2>
<p><time datetime="2024-05-18T09:15:00+08:00">2024-05-18 09:15</time> 发布</p>
</header>
<p>看到很多新手这么写……</p>
<footer>
<address><a href="/u/john">john</a></address>
</footer>
</article>
实际做时最容易忽略的是 <article> 和 <section> 的嵌套深度 —— 超过两层就会让 DOM 树变得模糊，尤其当后端模板动态插入楼层回复时。宁可多几个扁平的 <article>，也别堆三层 <section> 套娃。 
