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