css - 推荐详细信息的语义标记

Question

我刚得到如下PSD设计:

(很抱歉中间的网格线，那条蓝线真的不需要。)。

现在我想知道所有的 html5 标签，什么是一个伟大的语义标记来编写上述设计，我通常是一个老派的人，使用 div 和 spans ，但这次我使用了 cite ，当我阅读 MDN 文档时，似乎仍然不清楚可以在 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>

谁能告诉我用什么方式来编写证明细节的代码更符合语义？谢谢，我将不胜感激任何帮助或指导，我一直想知道什么是语义标记，尤其是对于上述场景。

Answer 1

使用 schema.org 元数据

<div class="testimonia-details" itemscope itemtype="http://schema.org/Person">
  <img src="img/res/p1.png" alt="testimonial giver" itemprop="image">
  <p>
    <span itemprop="name">Brian</span>-May 2015
    <span itemprop="jobTitle">Managing Partner.<span itemprop="worksFor">Tammy Lenski LLC</span></span>
  </p>
</div>