Css 鉴定细节的语义标记

我获得了以下PSD设计：

（对不起，中间的网格线，那条蓝线真的不需要。）

现在我想知道所有这些html5标签，什么是一个伟大的语义标记来编码上述设计，我通常是一个老派的家伙，使用

div

和

span

，但这次我使用了

cite

，当我阅读MDN文档时，似乎仍然不清楚名称/名称是否可以在

cite

中使用，基本上看cite的方式是，它是一个标签，只有当您有明确的资源添加到标记中时才能使用。尽管名称和名称都不是确定的资源，但我还是提出了以下标记

<div class="testimonia-details">

        <img src="img/res/p1.png" alt="testimonial giver">
        <p>
            <span>Brian</span>-May 2015
            <span>Managing Partner.<cite>Tammy Lenski LLC</cite></span>
        </p>

</div>

布莱恩，2015年5月
管理合伙人塔米·兰斯基有限责任公司

---

有谁能告诉我，用什么更具语义的方式来编码推荐信的细节？谢谢，我将非常感谢任何帮助或指导，我一直想知道什么是语义标记，特别是对于上述场景。

使用schema.org元数据

布莱恩，2015年5月
管理合伙人塔米·兰斯基有限责任公司

我不会使用

引用

，因为它通常与块引号或引号关联（本例两者都不是），但您可以始终使用微数据来增加语义的丰富性。@KarlDawson谢谢，我还考虑了关于这类证明的figure和figcaption元素！如果将

图

块放置在其他位置时有意义（即，它有自己的上下文），那么请确保您可能会这样做。有一个例子，其中一首诗是使用

图标记的，因此它不仅限于图像。谢谢，可爱的，我想了解更多关于我使用的HTML标记的意见，但回答很好！：）选择
图
/
figcaption
路线（或两者都选）。