Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Blockquote patterns for ALA

View 1. single-line.html
1 2 3
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
View 1. single-line.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>
View 1. single-line.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>
View 1. single-line.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>
View 1. single-line.html
1 2 3
<aside class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</aside>
Owner

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!

Owner

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

Owner

@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.

r-a-y commented

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?

Owner

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:" }
r-a-y commented

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.