将HTML5标签与图像和作者结合使用

Question

在搜索了一些资源后，我最终创建了这种等价：

<blockquote>

  <p>Nulla venenatis ac orci at placerat. Vivamus quam odio, sagittis vitae dui in, faucibus euismod metus. Vivamus purus sem, dictum vel egestas sit amet, facilisis ac tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elis mauris, luctus in risus et, volutpat malesuada mito.</p>
  <figure>
    <img src="#" alt="John Doe">
    <figcaption>
        <small>John Doe</small>
    </figcaption>
  </figure>

</blockquote>

对于这个结果：

在这种情况<figure>和<figcaption>上使用是否正确？

为作者使用页脚或小写是否更好？两者似乎都有效。

Answer 1

如果您关注的W3C HTML5允许将归因放在blockquote元素中，则需要使用footer：

  

报价的归因，[如果有的话]可能是 [sic] 放在blockquote元素中，但必须在cite元素内，以便 - 文本属性或footer元素内。

尽管如此，您仍然可以使用figure元素;你只需要把它放在footer。

您对small元素的使用是不合适的，因为作者姓名不是大多数人认为的“精细打印”for the purposes of small。使用cite标记了作者姓名（如果您正在关注W3C HTML5，则再次标记）：

<blockquote>

  <p>Nulla venenatis ac orci at placerat. Vivamus quam odio, sagittis vitae dui in, faucibus euismod metus. Vivamus purus sem, dictum vel egestas sit amet, facilisis ac tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elis mauris, luctus in risus et, volutpat malesuada mito.</p>
  <footer>
    <figure>
      <img src="#" alt="John Doe">
      <figcaption><cite>John Doe</cite></figcaption>
    </figure>
  </footer>

</blockquote>

如果您关注WHATWG HTML，则会禁止将归因置于blockquote之内;在这种情况下，只需将figure移出blockquote。