Correct use of Blockquote, q and cite?
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
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>
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.
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 relevantcite
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).