I have an easy route to output some markup I can take which results in:
<blockquote>The quote</blockquote>
<blockquote>The quotee</blockquote>
For example (1):
<blockquote>The secret of getting ahead is getting started.</blockquote>
<blockquote>- Mark Twain</blockquote>
That feels a bit icky to me, as though the contents of a blockquote should all be self-contained. And also that in doing this, I might trigger some less-than-desirable result with assistive technologies, such as screen readers, relying on semantic markup.
If it were self-contained, that would then require additional markup to reliably style the quotee differently from the quote with CSS, for example (2):
<blockquote>
The secret of getting ahead is getting started.
<span>- Mark Twain</span>
</blockquote>
All feelings about encapsulation aside, does anyone know if there is a perceptible difference in how those different approaches are presented to users?
Unless the content of <cite> is part of the quote itself it should not live within the <blockquote>, only the quotation should be within.
As detailed in the html5 spec for blockquotes the correct markup in this situation would be to use <figure> to group the quote and author. From the spec:
…a blockquote element is used in conjunction with a figure element and its figcaption to clearly relate a quote to its attribution (which is not part of the quote and therefore doesn't belong inside the blockquote itself)
Do, given your example the ideal markup pattern would be:
<figure>
<blockquote>
<p>The secret of getting ahead is getting started.</p>
</blockquote>
<figcaption>Mark Twain</figcaption>
</figure>
<cite> would be used to point to the actual source of that quote.