用于推荐细节的语义标记

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>