Combine HTML5 tags for quote with image and author

Question

After searching some resources, I ended up creating this equivalence:

<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>

For this result:

Is it correct to use on this case <figure> and <figcaption>?

Is it better to use footer or small for the author? Both seem valid.

Answer 1

If you're following W3C HTML5, which allows attribution to be placed within a blockquote element, you need to use a 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.

You can still use a figure element as you are doing, though; you just need to put it in a footer.

Your use of the small element is inappropriate, since the author name isn't what most would consider "fine print" for the purposes of small. The author name is marked up using cite (again, if you're following 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>

If you're following WHATWG HTML, then it forbids attribution to be placed within a blockquote; in this case, simply move the figure out of the blockquote.