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>

Curious how you see links fitting into this pattern. Do you prefer separate links for the author of the block quote (i.e Twitter account), and link for the source (i.e. Website) or just one link in the cite element back to the website.

I don't like idea with figure, 'cause I use it for images too. But this have sense.

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?