将 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> 是否正确？

作者用footer好还是small好？两者似乎都有效。

Answer 1

如果您正在关注 W3C HTML5，它允许将属性放置在 blockquote 元素中，您需要使用 footer:

Attribution for the quotation, [if any,] may be be [sic] placed inside the blockquote element, but must be within a cite element for in-text attributions or within a footer element.

不过，您仍然可以像现在这样使用 figure 元素；你只需要把它放在 footer.

您对 small 元素的使用是不合适的，因为大多数人不会考虑作者姓名 "fine print" 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.

将 HTML5 标签与图像和作者结合起来引用

Combine HTML5 tags for quote with image and author

html

semantic-markup