Correct use of Blockquote, q and cite?

Question

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

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

Is use of Blockquote, q semantically correct? or both are presentational element , so should not be used?

Answer 1

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 2

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

Answer 3

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

The q element is an inline element and 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 slightly more complicated. It's an inline element but it depends which HTML spec you're following. The W3C states that it may contain a URL, a title of a work (eg. book title, film title, etc.), or an author's name.

The WHATWG states that it may only contain a URL or a title of a work, and so not a person's name.

This is a valid WHATWG 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>

Answer 4

http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE

Answer 5

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 6

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