HTML语义化标签在论坛帖子展示中的具体应用-html教程-PHP中文网

论坛每条帖子必须用 article 标签，因其语义明确标识独立可引用内容；需含 h1–h6 或 header，元信息置内部，子回复用 article 加 aria-labelledby，禁用冗余 section 包裹。

html语义化标签在论坛帖子展示中的具体应用

论坛每条帖子必须用 `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 不是“看起来像卡片就用”，而是“有明确主题 + 可独立命名 + 内容围绕同一目的组织”的区域。论坛首页常见的三个区块，适合这样写：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<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> —— 机器可解析，用户可读
作者链接：@#@#@#@#@#@#@#@#@#@0 —— 明确关系，利于 SEO 和 a11y
编辑记录：<details><summary>编辑记录</summary>2024-05-21 10:12 由管理员修改</details> —— 不占默认视图，又保留可访问性

最容易被忽略的是：右侧全局侧边栏（如热门版块、在线人数）绝不能塞进某个 article 或 section 里——它不属于任何单条帖子，该放 main 外，用 aside 或普通 div 即可。