1

I read two things about blockquotes:

  1. The cite-tag has to be inside the blockquote-tag

  2. Quotationmarks are not part of semntic layout. That makes sense, as I don't want the user to take care of correct quotation. Eg. if I want to use Guillemets.

That leads to a problem. If I want it to look that way:

"Blockquotes are an essential part of a fancy website."
                                                – Cite

The markup would look like this:

<blockquote><p>Blockquotes are an essential part of a fancy website."</p>
<cite>Cite</cite></blockquote>

I could use the :before and :after elements to add the quotationmarks and the dash. But what if I have two paragraphs? I could wrap them into a span, but at that point, it really gets too complicated for my users to take care of it. (Plus: Wordpress does not even have a way to add a cite-tag, but thats another story)

How would you solve this? What is your HTML-Markup for a correct blockquote and how do you add the quotationmarks?

5
  • I assume you mean using before and after on the <p>? I wonder if you could mix it with some first-child and last-child selectors... not sure on browser support though. Commented Oct 23, 2013 at 11:49
  • You are right! The support is better than that of :before and :after. I should have thought about this. Maybe you can post it as an answer. Commented Oct 23, 2013 at 11:53
  • What is the "Cite" supposed to be? I'm not sure you are using the <cite> element right. Were you thinking of the cite attribute?
    – Mr Lister
    Commented Oct 23, 2013 at 12:01
  • I think it's this: developer.mozilla.org/en-US/docs/Web/HTML/Element/cite Commented Oct 23, 2013 at 12:05
  • As far as I understand it can be used, for example, to contain the Newspaper in which the quote was printed. (– New York Times) And that's, how I use it. If you want to have something like - Mark Twain, you can use another tag, I think in that case it has to be outside the blockquote. Commented Oct 23, 2013 at 12:15

2 Answers 2

2

How about something like this?

blockquote p:first-of-type:before {
    content:"\00AB";
    font-size:1.5em;
}

blockquote p:last-of-type:after {
    content:"\00BB";
    font-size:1.5em;}

cite:before {
    content:"\2014"
}

This uses guillemets and an mdash to format the output.

jsfiddle: http://jsfiddle.net/9LjTB/1/

1
  • for guillements we'll need an escaped \uWhatsit so it outputs properly... just trying to find the correct code, then I'll update the answer. Commented Oct 23, 2013 at 12:00
2

(EDIT: Note that the definition of both elements, blockquote and cite, changed in HTML 5.1 recently; this answer reflects the current HTML5 state, not the changed HTML 5.1 one.)


The cite element must not be part of the blockquote (unless you quote a quote+attribution). blockquote must only contain quoted content, not the quotation author/source.

HTML5 spec for blockquote:

Attribution for the quotation, if any, must be placed outside the blockquote element.

So it should be:

<blockquote>…</blockquote>
<cite>…</cite>

Note that in HTML5, the cite element may be used only for the "title of a work"; so it’s likely that you want to use a div, possibly containing cite:

<blockquote>…</blockquote>
<div class="quote-attribution">Walter White, <cite>Breaking Bad</cite></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.