Search code examples
htmlcssquotessemantic-markup

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?

Solution

  • 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/