客户评论的理想 HTML 语义

Question

我需要在我的页面上包含一些客户评论，并且不确定我的方法在语义和实践上是否正确。 我可能想得太多了，所以欢迎输入！

我想在标题中包含该元素，它也是图的一部分。这样就不会有图标题了。

       <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>       

另一种方法是包含块引用作为 5 星级图像的标题

       <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>       

大多数教程显示的方式是图标题中的引用，但我不喜欢标题没有真正达到目的。

        <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>

或者可能更复杂，但为什么不呢？

        <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>

Answer 1

使用

<blockquote>

标签直接引用 Claire 并在元素中附加星级就足够了，无需使用

<figure>/<figcaption>

为可访问性树/DOM 深度添加不必要的复杂性。

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

此外，

<cite>

标签保留用于创意作品或媒体的名称，而不是人。

一个人的名字不是作品的标题——即使人们称这个人为一件作品——因此该元素不得用于标记人的名字。 （在某些情况下，

<b>

元素可能适合名称；例如，在八卦文章中，名人的名字是用不同样式呈现的关键字，以引起人们的注意。在其他情况下，如果确实需要一个元素，可以使用

<span>

元素。）