public
Last active

Blockquote patterns for ALA

  • Download Gist
1. single-line.html
HTML
1 2 3
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
2. single-line-with-attribution.html
HTML
1 2 3 4
<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
HTML
1 2 3 4 5 6 7
<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
HTML
1 2 3 4 5
<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
HTML
1 2 3
<aside class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</aside>

The cite tag is always optional, IMHO, but if you do use it know this: The cite tag is not meant for people's names; according to the spec, it is only for works, not people.

This makes complete sense to me. When I first started marking up articles, I looked at past blockquotes with and without citations to see how you guys did it and found some inconsistencies and weird markup (e.g. the citation getting marked up as an address to force the font size down). This approach fits every example I can imagine. Thanks!

I share Sarah's approval. Well done, young Tim!

I've wondered about the best way to do this for some time. Thanks!

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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.