12

In HTML5, is it correct to put blockquotes inside paragraphs or is the opposite the right way? I mean, logic tells that a blockquote may be citing multiple paragraps, doesn't it?

But doesn't blockquotes need to contain q elements? Could someone explain me the right structure?

EDIT: To add some info. I got this doubt because when trying to implement quotation marks with CSS, they don't appear on blockquote but they do on q elements. What is the right way to do this?

blockquote, q {
  quotes: "\201C""\201D""\2018""\2019";
  font-style: italic;
}
<blockquote>
  <p>Hello!</p>
  <p>Say something!</p>
</blockquote>
<p>He told me <q>Say something!</q>
</p>
Vandervals
  • 5,774
  • 6
  • 48
  • 94

3 Answers3

14

According to the specifications provided by the W3 group the blockquote is a block level semantic that should contain the entire quote, which can be made up of multiple paragraphs. Because the blockquote itself contains one or more paragraphs(or other elements), it doesn't make much sense to put it inside a paragraph. An example, provided by the W3G:

<blockquote>
    <p>My favorite book is <cite class="from-source">At Swim-Two-Birds</cite></p>
    <footer>- <cite>Mike[tm]Smith</cite></footer>
</blockquote>

As you can see, the example blockquote contains text that's inside of p elements, but not inside of q elements.

The q element is a text level semantic and it should be used to indicate that part of the text is a quotation. Because the blockquote already indicates quotation, marking the text inside with q-elements is not necessary. An example, taken from the W3G specification:

<p>The man said <q>Things that are impossible just take longer</q>. I disagreed with him.</p>

Long story short: if you use a blockquote element, put other elements (such as p elements) inside of it, but it's not necessary to use q elements inside a blockquote.

gertmenkel
  • 281
  • 1
  • 6
11

According to the specs <p>s can only contains Phrasing content, which blockquote isn't.

On the other side blockquote can contain Flow content which <p> is.

So only paragraph inside blockquote is valid, but not the opposite.

Szabolcs Páll
  • 1,402
  • 6
  • 25
  • 31
4

blockquote is the block-level replacement for q elements.

If you want to quote multiple paragraphs so that it looks like a block, use blockquote and put ps inside them.

See MDN on blockquotes

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

The example has a <p> inside a <blockquote>.

<q> on the other hand says:

The HTML Quote Element (<q>) indicates that the enclosed text is a short inline quotation. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use <blockquote> element.

Bottom line: the correct usage is:

<blockquote>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
</blockquote>
<p>
  Paragraph 3 with a <q>short quotation</q>.
</p>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
  • That is nice, but what really made me doubt is that, blockquote alone doesn't show quotemarks, I don't know why. I'll update my question. – Vandervals Aug 23 '15 at 19:52
  • 1
    @Vandervals It’s not supposed to show quote marks. The default styling is a margin, not quote marks. – Sebastian Simon Aug 23 '15 at 19:55