Skip to content

Instantly share code, notes, and snippets.

@Wilto
Created December 20, 2012 15:35
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Wilto/4345988 to your computer and use it in GitHub Desktop.
Save Wilto/4345988 to your computer and use it in GitHub Desktop.
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.

@tantek
Copy link

tantek commented Nov 14, 2014

Similar thoughts to Mr. Z.

There are simply too many elements, that's all. Just cut a few.*

Or perhaps I should. I really need to finish this new book. And find a publisher. Hmm...

*Apologies to http://www.imdb.com/title/tt0086879/quotes?item=qt0469793

Seriously, a quotation and a source for it, are just two things, therefore you should be able to mark them up with two elements. Any more and you're working too hard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment