Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blockquote patterns for ALA
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
<figcaption>Sherlock Holmes, <cite>Sign of Four</cite></figcaption>
</figure>
<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>
<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>
<aside class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</aside>
@murtaugh

This comment has been minimized.

Show comment
Hide comment
@murtaugh

murtaugh Jan 9, 2013

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.

Owner

murtaugh commented Jan 9, 2013

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.

@sarawb

This comment has been minimized.

Show comment
Hide comment
@sarawb

sarawb Jan 9, 2013

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!

sarawb commented Jan 9, 2013

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!

@zeldman

This comment has been minimized.

Show comment
Hide comment
@zeldman

zeldman Jan 9, 2013

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

zeldman commented Jan 9, 2013

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

@jonalport

This comment has been minimized.

Show comment
Hide comment
@jonalport

jonalport Jan 29, 2013

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

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

@bjankord

This comment has been minimized.

Show comment
Hide comment
@bjankord

bjankord Jan 30, 2013

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.

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.

@Marfa

This comment has been minimized.

Show comment
Hide comment
@Marfa

Marfa Jan 31, 2013

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

Marfa commented Jan 31, 2013

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

@SaraSoueidan

This comment has been minimized.

Show comment
Hide comment
@SaraSoueidan

SaraSoueidan Feb 2, 2013

Makes perfect sense!

Makes perfect sense!

@murtaugh

This comment has been minimized.

Show comment
Hide comment
@murtaugh

murtaugh Feb 13, 2013

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

Owner

murtaugh commented Feb 13, 2013

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

@murtaugh

This comment has been minimized.

Show comment
Hide comment
@murtaugh

murtaugh Feb 13, 2013

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

Owner

murtaugh commented Feb 13, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@r-a-y

r-a-y Mar 19, 2013

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?

r-a-y commented Mar 19, 2013

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?

@murtaugh

This comment has been minimized.

Show comment
Hide comment
@murtaugh

murtaugh Mar 25, 2013

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:" }
Owner

murtaugh commented Mar 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@r-a-y

r-a-y Apr 6, 2013

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.

r-a-y commented Apr 6, 2013

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.

@palimadra

This comment has been minimized.

Show comment
Hide comment
@palimadra

palimadra Jun 21, 2014

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?

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