评论区整体用，每条评论必须用；作者用，时间用；交互元素须用语义化标签，标题需严格递进。
评论区该用 还是 ？
必须用 <article></article>。每条评论是独立、可分发、可复用的内容单元——哪怕只是用户一句“很好”，它也具备完整语义：有作者、有时间、有观点，脱离当前页面仍能被 RSS 订阅、被搜索引擎单独索引、被屏幕阅读器识别为一条独立条目。
用 <section></section> 是常见错误，它只表示“主题分组”，比如把“热门评论”“最新评论”各自包成一个 <section></section>，但每个具体评论本身不能降级为 section。
-
<article></article>内部应包含至少一个标题（<h3></h3>或<h4></h4>），可用作者名或“用户评论”作为占位标题 - 允许嵌套：一条评论下的回复，可再用
<article></article>包裹，形成语义清晰的树状结构 - 避免包裹空内容或纯样式容器——如果只有时间戳和头像没文字，就不是合格的
<article></article>
如何标记评论作者与时间？
作者信息用 <header></header> + <cite></cite> 组合，时间用 <time datetime=""></time>，这是机器可读的关键。
错误写法：<div class="author">张三</div> <div class="date">2026-08-24</div> —— 搜索引擎和辅助技术完全无法识别其含义。
-
<header></header>放在<article></article>顶部，内部用<cite></cite>包裹作者名（<cite></cite>语义就是“引用来源”，天然适配评论作者） -
<time datetime="2026-08-24T15:30">昨天 15:30</time>必须带datetime属性，值为 ISO 8601 格式，视觉文本可写相对时间 - 不要用
<span></span>或<div> 模拟这些语义，ARIA 属性也无法替代原生标签的解析优先级 <h3>评论区整体结构怎么组织？</h3> <p>整个评论区本身不是 <code><article></article>，而是<section></section>，因为它是一个主题性区块（“用户反馈”），且需配合标题，比如<h2>用户评论</h2>。常见错误是给整个评论列表套
<main></main>或<aside></aside>：前者会干扰页面主内容定位；后者暗示它是附属内容，而评论区往往是核心交互区域。- 外层用
<section aria-labelledby="comments-title"></section>，并设<h2 id="comments-title"></h2>，确保屏幕阅读器能准确播报区块作用 - 每条评论用
<article></article>，不加 class 或 id 也能被正确归类为 landmark region - 加载更多按钮、分页控件统一放在
<nav></nav>内，而非散落在<div> 中 <h3>回复、点赞、举报等交互元素怎么处理？</h3> <p>按钮必须用 <code><button></button>，链接必须用<a href=""></a>，禁止用<div onclick=""> 模拟。 <p>语义错误在这里直接导致可访问性失效：屏幕阅读器不会把 <code><div> 当作可操作控件通告，键盘 Tab 也无法聚焦，视障用户根本无法触发点赞。 <ul> <li>点赞按钮：<code><button type="button" aria-label="为这条评论点赞">?</button>，禁用type="submit"避免意外表单提交 - 举报链接：
<a href="/report?id=123" aria-label="举报此评论">举报</a>，不依赖视觉文字“举报”本身 - 回复输入框需关联到对应评论：
<textarea aria-label="回复张三的评论" aria-describedby="comment-123-header"></textarea>
最容易被忽略的是嵌套层级里的标题连续性：如果评论区
<h2></h2>下直接跟<article></article>里的<h4></h4>，中间跳过<h3></h3>，会导致大纲生成错乱、辅助导航失效。所有标题必须严格递进，且每个<article></article>至少含一个标题级元素。 - 外层用
