客户评论模块的HTML语义化写法合理性咨询

下面逐个分析你给出的四种写法的语义合理性和实用性：

方案一：figure内标题嵌套cite、留空figcaption #

<section>
  <figure>            
      <h3><cite>Claire</cite></h3>
      <img src="5stars.png" alt="5 stars">
      <blockquote>
          <p>I really benefit from this product, every single day</p>
      </blockquote>
      <figcaption>
      <!-- nothing to add here, citing Claire again would be redundant -->
      </figcaption>
  </figure>
</section>       

• 语义问题：<figure> 是用来包裹图像、引用这类独立内容单元的，直接在里面放 <h3> 不符合它的语义规范，标题属于父级 <section> 的结构元素，不该放在 <figure> 内部。
• 冗余问题：空的 <figcaption> 完全没必要，直接删除即可，不会影响功能和语义。
• 可用性问题：把 <cite> 嵌套在 <h3> 里，屏幕阅读器会混淆标题和来源的层级，不利于无障碍访问。

方案二：将blockquote放入figcaption #

<section>
  <figure>            
      <h3><cite>Claire</cite></h3>
      <img src="5stars.png" alt="5 stars">
      <figcaption>
      <blockquote>
          <p>I really benefit from this product, every single day</p>
      </blockquote>
      </figcaption>
  </figure>
</section>       

这个方案语义完全错误：<figcaption> 的作用是给 <figure> 里的核心内容（这里是五星评分图）提供说明，而评论内容是独立的主体，并非对图片的说明，强行把 <blockquote> 塞进去完全违背了标签的设计意图，同时也存在方案一里 <figure> 放 <h3> 的语义问题。

方案三：教程常见写法（cite放在figcaption） #

<section>
    <h3>Claire's review</h3> <!-- Title would likely be hidden from page -->
<figure>
    <img src="5stars.png" alt="5 stars">
    <blockquote>
        <p>I really benefit from this product, every single day</p>
    </blockquote>
    <figcaption>
        <cite>Claire Bis</cite>
    </figcaption>
</figure>
</section>

这个方案的语义最合理：<figure> 完整包裹了评论的核心元素（评分图+引用内容），<figcaption> 用来标注评论来源，完全符合 <figure> 和 <figcaption> 的语义设计。你觉得heading没用是对的，如果这个标题只是用来隐藏的，完全可以删掉——每个评论的 <section> 不需要强制加冗余的隐藏标题，只要内容结构清晰即可。

方案四：拆分header和figure #

<section>
<header>
<h3>Claire's review</h3> <!-- Title would likely be hidden from page -->
<img src="5stars.png" alt="5 stars">
</header>
<figure>
    <blockquote>
        <p>I really benefit from this product, every single day</p>
    </blockquote>
    <figcaption>
        <cite>Claire Bis</cite>
    </figcaption>
</figure>
</section>

结构过于冗余：评分图是评论内容的一部分，和引用内容放在一起更符合逻辑，没必要单独放进 <header>。同样，隐藏的标题属于冗余内容，完全可以去掉。

推荐的语义化写法 #

如果不需要单独的标题，优先用这个简洁且语义清晰的版本：

<section>
  <figure>
    <img src="5stars.png" alt="5 stars">
    <blockquote>
      <p>I really benefit from this product, every single day</p>
    </blockquote>
    <figcaption>
      <cite>Claire Bis</cite>
    </figcaption>
  </figure>
</section>

如果需要把用户名作为可见标题展示，这样写更合理：

<section>
  <h3><cite>Claire Bis</cite></h3>
  <figure>
    <img src="5stars.png" alt="5 stars">
    <blockquote>
      <p>I really benefit from this product, every single day</p>
    </blockquote>
  </figure>
</section>

• 第一种写法：<figure> 完整包裹评论的所有相关元素，屏幕阅读器能正确识别这是一组独立的评论内容，语义清晰，结构简洁。
• 第二种写法：把用户名标题放在 <section> 下，避免了 <figure> 里放标题的语义问题，同时用 <cite> 正确标记评论来源，兼顾了视觉展示和语义规范。

内容的提问来源于stack exchange，提问作者Kellerness