article 标签如何正确处理评论区语义布局-H5教程-PHP中文网

评论区每条评论应使用article标签，因其需独立可理解、引用和分发；必须包含标题（如昵称）、正文、时间等元数据；回复应嵌套在section或li中，评论区容器宜用section而非article。

article 标签如何正确处理评论区语义布局

评论区用 article 不是看“长得像卡片”，而是看每条评论本身能不能被单独理解、引用或分发。

一条评论要配得上 article，至少得包含：一个标题（如用户昵称或“来自张三的评论”）、正文内容、发布时间或作者信息。它得能复制粘贴到新页面里，别人一眼就明白这是谁、什么时候、说了什么。

✅ 合规示例：

<article><header><h3>李四</h3>
<time datetime="2026-06-20">6月20日</time></header><p>这个方案解决了我卡了三天的问题，谢谢！</p></article>

❌ 不合规：只有 <p>同意楼上</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/1601" title="倍塔塞司"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680025954506.jpg" alt="倍塔塞司" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/1601" title="倍塔塞司" class="overflowclass">倍塔塞司</a> <p class="overflowclass">一款聚焦职业发展与职业测评的 AI 服务平台，提供职业规划、个性化测评及相关 AI 工具，帮助用户梳理职业方向与发展需求。</p> </div> <a rel="nofollow" href="/ai/1601" title="倍塔塞司" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，没作者、没时间、没上下文——该用 <code>section 或 li，别硬套 article

主文章用 article，里面每条评论也用 article，这是常见且合法的嵌套。但回复（二级评论）绝大多数不满足独立性，不该再套一层 article。

“评论区”本身是组织逻辑，不是独立内容单元。它应该用 section 或 aside 包裹，里面再放多个 article（每条评论）。

✅ 正确：<section><h2>网友评论</h2> <article>…</article><article>…</article></section>
❌ 错误：<article><h2>网友评论</h2> <div>…</div></article> —— 整个模块没独立语义，还缺每条评论自己的标题和元数据