客户评价应优先使用语义清晰、结构简洁的 HTML，推荐以 包裹 标题与 主体，将星级图标作为内联内容嵌入引述中；避免滥用 /，且 不应用于人名。

客户评价应优先使用语义清晰、结构简洁的 html，推荐以 `

` 包裹 `

` 标题与 `

` 主体，将星级图标作为内联内容嵌入引述中；避免滥用 `

`/`

`，且 `` 不应用于人名。

在构建用户评价模块时，语义准确性直接影响可访问性（如屏幕阅读器解析）、SEO 表现及长期维护成本。HTML 规范明确指出：

是表示他人原话引用的标准元素，天然适用于客户真实评论；而

的核心语义是“独立于主流程的内容单元（如图表、插图、代码示例）”，其存在应有明确的图注（

）价值——若仅用它包裹文字评价，反而会增加 DOM 深度、弱化语义层级。

✅ 推荐写法（简洁、合规、无障碍友好）：

<section><h3>Claire's review</h3>
  <blockquote>
    <p>I really benefit from this product, every single day.</p>
    @@##@@
  </blockquote>
</section>

该结构优势显著：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 提供清晰的标题层级，便于导航与大纲生成；

• 准确传达“这是他人陈述”，浏览器和辅助技术可据此优化朗读行为（如添加停顿、改变语调）；

• 星级图标作为

  的一部分，逻辑上属于该评论的视觉补充，alt 属性需描述其含义（如 "Rated 5 out of 5 stars"），而非仅 "5 stars"；

• 完全规避

  的语义误用，也无需冗余的空

  或强行嵌套 。

⚠️ 关键注意事项：

• 禁用 标记人名：根据 HTML Living Standard， 仅用于作品标题（如书籍、电影、文章名），不适用于人名。此处直接使用普通文本 Claire 即可；若需强调，可用 Claire 配合 CSS 控制样式。
• 勿为“美观”牺牲语义：将

  塞进

  或把整段评论塞进

  ，虽在视觉上可行，但会破坏文档大纲结构，导致辅助技术无法正确识别标题作用域。

• 多条评论？用
  更精准
  ：若每条评价具有独立发布属性（如带时间戳、作者链接、可分享），建议升级为
  ，并添加 aria-labelledby 等增强可访问性。

总结：语义化不是追求标签数量，而是让每个元素各司其职。客户评价的本质是「引用」，而非「图表」——回归

的本源用法，辅以恰当的标题与图像替代文本，就是最稳健、最符合标准的实现方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！