CODEWITHSUNDEEP
htmlcssquotessemantic-markup
Sebastian Starke
Sebastian Starke

Reputation: 5317

Correct blockquote markup and CSS Style

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?

Upvotes: 1

Views: 2688

Answers (2)

unor
unor

Reputation: 96547

(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>

Upvotes: 2

I don&#39;t use this profile anymo
I don&#39;t use this profile anymo

Reputation: 2676

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/

Upvotes: 2

Related Questions