Of Blockquotes and Outlines

( Conversation started here, with @murtaugh and @zeldman. )

Ah man, I got Opinions™ on this. I ususally go with something like:

<aside>
  <h1>Optional Heading</h1>
  <blockquote>
  	<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>
	<address>Sherlock Holmes</address>
	<cite>Sign of Four</cite>
</aside>

aside provides sectioning context, address flags the author/owner of the current sectioning context, cite to cite a “work”, and blockquote because it’s… a blockquote. I’d probably bolt the emdash onto the front of the address with address:before { content: "—"; }, where it’s not really essential. This is all predicated on the pullquote being considered non-essential to the surrounding content.

The figure route could work too, but technically figure doesn’t provide sectioning context, so there’s two ways you could go with this.

<aside || section>
<figure>
	<blockquote>
		<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>
	<figcaption>
		<address>Sherlock Holmes</address>
		<cite>Sign of Four</cite>
	</figcaption>
</figure>
</aside || /section>

aside if complementary but inessential to the surrounding content (like a pull-quote directly from the article), section if part to the surrounding content (an external quote directly referenced by the text).

That’s an awful lot of stuff, though, so the other way of doing it with figure:

<figure>
	<blockquote>
		<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>
	<figcaption>
		<p>Sherlock Holmes</p>
		<p>Sign of Four</p>
	</figcaption>
</figure>

The figcaption flags the content as metadata for the rest of the figure, but you lose the specifics: “author” and “work” just become generic metadata.

I’m partial to the first one from an HTML5 outline standpoint.

Wilto/blockquote.md

tantek commented Nov 14, 2014