Correct use of Blockquote, q and cite?

Question

Is this the correct use of Blockquote, q and cite?

Type HTML in the textarea above, 

        

Answer 1

Yes. They are not presentational elements — blockquote represents a block quotation, q represents an inline quotation, and cite represents a reference to a name, work, standard, URL, etc.

You do have some validation errors that are fairly common with blockquote. A blockquote element cannot be inside a paragraph, and in HTML4 actually needs to contain paragraphs. The nesting of the p and blockquote elements in your fragment needs to be reversed.

The blockquote element (also the q element) can optionally have a cite attribute to specify a URI where the quote came from. HTML5 says user agents should make that link available to the user, and HTML4 doesn't say anything at all. I would include the URI both in the cite attribute and as an inline link, since browsers don't handle it.

Here's how I would write that fragment, with those revisions in mind:

<blockquote cite="http://stackoverflow.com">
  <p>Type HTML in the textarea above, <q>and it will magically
  appear</q> in the frame below.</p>
</blockquote>
<p>
  <cite><a href="http://stackoverflow.com">reference url</a></cite>
</p>

Validate this fragment

Answer 2

According to this, "cite" is an attribute of q - and is not well supported at that.

Answer 3

You could consider BLOCKQUOTE analogous to a DIV and Q analogous to SPAN.

Recommended usage is to enclose large quotes in BLOCKQUOTE and small, single line or sentence quotes in Q.

<blockquote>
    <p>This is a big quote.</p>
    <p>This is the second paragraph with a smaller <q>quote</q> inside</p>
</blockquote>

Cite is an attribute on either which merely points to the source.

Answer 4

The semantic (and valid) use of the <cite> element is still under debate even if "in HTML5, use of this element to mark a person's name is no longer considered semantically appropriate."

You'll find a very detailed and useful article about "<blockquote>, <q> and <cite>" here:

http://html5doctor.com/blockquote-q-cite/

Answer 5

Using attributes such as the cite attribute of the blockquote or q doesn't make it easily displayable (without JS or tricky CSS) and so does not address the aim of displaying a reference link easily. It is now conforming to include cite (and/or footer) into blockquote to specify the source, either textually of through a URL, of the quote, like below :

<blockquote>
  <p>Beware of bugs in the above code; I have only proved it correct, not tried it.” </p>
  <cite><a href="http://www-cs-faculty.stanford.edu/~uno/faq.html">Donald Knuth: Notes on the van Emde Boas construction of priority deques: An instructive use of recursion, March 29th, 1977</a>
</blockquote>

Note that :

• cases of cite that are part of the quote contents (not the source reference) are also deemed quite rare, and should be handle through a differenciating class on the relevant cite subtag)

• Regarding q, it is indeed aimed to quote inline, but it is more likely to be used outside of blockquotes (quotes into quotes are quite rare).

Answer 6

The other answers on this page are out of date, but the question is still valid.

The q element semantically represents a quotation, and is an inline element. It should be used like so (ie. no block elements inside it):

<p>
   In the words of <cite>Charles Bukowski</cite> -  
   <q>An intellectual says a simple thing in a hard way. 
   An artist says a hard thing in a simple way.</q>
</p>

Another example:

<p>
    <q>This is correct, said Hillary.</q> is a quote from the 
    popular daytime TV drama <cite>When Ian became Hillary</cite>.
</p> 

The q element should not be placed inside a blockquote element, as it would be redundant -- both denote a quote.

A blockquote is a block element, allowing other block elements to be placed inside:

  <blockquote>
    <p>My favorite book is <cite>At Swim-Two-Birds</cite>.</p>
    - <cite>Mike Smith</cite>
  </blockquote>

<cite> is an inline element representing the title of a body of work. Since the W3C and WHATWG have now agreed to work together, we have one answer as to what it may contain: The name of a book, a film, a TV show, a game, a song, a play, etc, etc.

It should NOT be a URL or an author's name.

This is a valid usage:

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>