Blockquote patterns for ALA

1. single-line.html

<figure class="quote">
	<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>

2. single-line-with-attribution.html

<figure class="quote">
	<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
	<figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>

3. multi-line.html

<figure class="quote">
	<blockquote>
		<p>It is the unofficial force—the Baker Street irregulars.</p>
		<p>What a bunch of maroons.</p>
	</blockquote>
	<figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>

4. tweets.html

<figure class="tweet">
	<!-- what's inside here is simply the code provided by Twitter without alteration. -->
	<blockquote class="twitter-tweet" data-partner="tweetdeck"><p>Never, ever, ever let them call you a “creative”. It’s a way to be disenfranchised. You are a designer. It’s not magic, it’s a trade.</p>&mdash; Mike Monteiro (@Mike_FTW) <a href="https://twitter.com/Mike_FTW/status/320929309273493505">April 7, 2013</a></blockquote>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</figure>

5. pullquote.html

<aside class="quote">
	<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</aside>

Makes perfect sense!

@marta — we use figure for a few things, including images and tables, and we use classes to tell them apart.

@bjankord — I'd say it's up to you. Maybe if the source material isn't canonical to the source person, linking the person's name would be worthwhile.

What if you wanted to do a more forum-like blockquote?

eg.

Ray wrote:
Semantics are just another brick in the wall.

How would you apply the correct markup to "Ray wrote:"?

I was thinking of doing something similar to what Oli recommended. But instead of using the <footer> element, I was thinking of using <header>. I know it's non-conforming, but would like some feedback on the best way to approach this.

Would <figure> work as an alternative?

That's a good question. I think I might consider not including the "Ray wrote" in the element.

eg:

Ray wrote:

Semantics are just another brick in the wall.

But if I did want to include it, and was ok with formalizing the text of the citation (and was ok with being somewhat ridiculous), I might very well keep the citation in a footer (which is allowed to precede the content it relates to) and do something like this:

<figure>
    <footer>Ray</footer>
    <blockquote>Semantics are just another brick in the wall.</blockquote>
</figure>

… with this CSS:

footer:after { content: " wrote:" }

Thanks for replying, murtaugh.

In regards to this markup:

<figure>
    <footer>Ray</footer>
    <blockquote>Semantics are just another brick in the wall.</blockquote>
</figure>

I think it's a little odd to use <footer> in this context. Simply because it's weird to see <footer> before the actual context of the item. However, <tfoot> is used in a similar manner as that's usually added before <tbody>.

If anyone else has any other suggestions, that would be great.

The definition of the <blockquote> and <cite> tags has been tweaked. A name is now a legitimate subject for citation.

Keeping this in mind does the pattern for <blockquote> should be changed?