Correct Use of Blockquote, Q and Cite

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

Valid use of q , blockquote and cite

`<q>`

The q element represents some phrasing content quoted from another source.

<p>And then he said <q>I heart HTML5.</q></p>

`<cite>`

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

<p>My favourite book is <cite>Introducing HTML5</cite> by Bruce and Remy.</p>

`<blockquote>`

The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

<blockquote>What we have here is a quotation from another source.</blockquote>

Differences between q and blockquote

Just see their definitions:

q element:

[…] some phrasing content quoted from another source
blockquote element:

[…] a section that is quoted from another source

The last part is the same ("quoted from another source"), so they only differ in "phrasing content" vs. "section".

q can only contain phrasing content (and it can only be used where such phrasing content is expected). blockquote can only contain flow content (and it can only be used where such flow content is expected). In that sense, they are similar to span (~ q) and div (~ blockquote).

Some other differences:

Note that blockquote is a sectioning root, which means that any headings or sectioning elements it may contain will not be part of the document’s outline. q can’t contain headings or sectioning elements in the first place.

Note that you MUST NOT use any quotation marks when using q (not before, not inside, not after), because user agents should add them automatically. There is no such restriction for blockquote (however, it’s probably unlikely that you’d need some for block quotes).

What is the purpose of the blockquote attribute ''cite'' in html?

As per https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#attr-q-cite

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.
If the cite attribute is present, it must be a valid URL potentially surrounded by spaces. To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents should allow users to follow such citation links.

<p>
  ... or better said by Frank,
  <q cite="https://www.goodreads.com/author/show/22302.Frank_Zappa">
      So many books, so little time.
  </q>
</p>

What is the benefit of adding cite attribute in blockquote tag of html?

From http://www.w3schools.com/tags/att_blockquote_cite.asp:

The cite attribute specifies the source of a quotation.
Tip: It's a good habit to always add the source of a quotation, if any.
The cite attribute does not render as anything special in any of the major browsers, but it can be used by search engines to get more information about the quotation.

Also refer Correct use of Blockquote, q and cite? and What is the cite attribute for? on Stackoverflow.

Must blockquotes contain paragraphs or must paragraphs contain blockquotes?

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.

Correct HTML Blockquote

Based on recent changes in the HTML specifications, this is now the proper way to handle blockquotes with citation.

<blockquote>
    <p>Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
    <footer>
        — <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
    </footer>
</blockquote>

Is my usage of blockquote elements acceptable from an accessibility perspective?

Unless the content of <cite> is part of the quote itself it should not live within the <blockquote>, only the quotation should be within.

As detailed in the html5 spec for blockquotes the correct markup in this situation would be to use <figure> to group the quote and author. From the spec:

…a blockquote element is used in conjunction with a figure element and its figcaption to clearly relate a quote to its attribution (which is not part of the quote and therefore doesn't belong inside the blockquote itself)

Do, given your example the ideal markup pattern would be:

<figure>
    <blockquote>
        <p>The secret of getting ahead is getting started.</p> 
    </blockquote>
    <figcaption>Mark Twain</figcaption>
</figure>

<cite> would be used to point to the actual source of that quote.