Mark up Quotes Properly – BLOCKQUOTE vs. Q
Quoting is repeating something that someone else has written, or paraphrasing of an idea from someone else. There are basically two different ways to mark up a quote: as a block quote with the HTML <blockquote> tag or as an inline quote with the HTML <q> tag.
Blockquote is a block element. The block quote is indented on the left and right, and formatted eye-catching (e.g. in italics). A line break is inserted before and after the quote.
The HTML BLOCKQUOTE tag is mainly used to markup longer text passages as a quotation. All HTML elements can be used within BLOCKQUOTE, for example headings, paragraphs, lists and all inline elements.
The blockquote tag starts with <blockquote> and has to be closed with </blockquote>.
The BLOCKQUOTE element mustn't be placed inside a paragraph.
Any direct quotation (direct speech) must be enclosed in double quotation marks.
A quotation inside a quotation must be enclosed in single quotation marks.
By default, these necessary quotation marks are not inserted automatically with the BLOCKQUOTE tag.
The Cite Attribute
It is good style to indicate the source of the quote. The BLOCKQUOTE HTML element has its own cite attribute, which specifies a URL as the source. The cite attribute is not displayed by default, since the specification states that the source should be specified outside of BLOCKQUOTE.
Source Reference
The source was formerly enclosed in <blockquote>. This information can be found in references such as SelfHTML. The W3C specification for HTML 5.2 also states that the source reference should be in a footer within BLOCKQUOTE.
The source reference is now outside of <blockquote>.
To be able to format the quote and the source together, it is recommended to use the HTML element FIGURE. Use <figure> for the quote and <figcaption> for the source.
Quote properly in HTML.
<figure>
<blockquote>
<p>Far back, behind the great mountains of words, far from the countries of Vocalia and Consonantia, live the blind texts. They live secluded in Letterville on the coast of Semantics.</p>
</blockquote>
<figcaption>
Source: www.blindtextgenerator.de –
<cite>Behind the Great Mountains of Words</cite>
</figcaption>
</figure>
Far back, behind the great mountains of words, far from the countries of Vocalia and Consonantia, live the blind texts. They live secluded in Letterville on the coast of Semantics.
The HTML <q> Tag
The HTML Q tag is an inline element. There is no automatic line break before or after the quote.
The HTML Q tag marks up text as a quotation in the running text. The web browsers automatically inserts typographic quotation marks at the beginning and end of the quotation according to the language set in the browser. Inline quotations start with <q> and must be closed with </q>.
For quotations in running text, it is common practice to use a superscript number in square brackets ('[' and ']') as a footnote to the source at the end of the page. The numbering should be continuous, starting at 1 on each page.
An Anchor Link is often used to point to the source at the bottom of the page. All footnotes placed in the running text of the page are listed at the bottom of the page. It can be useful to place a link there that points to the paragraph where the footnote is placed. This prevents the visitor from having to scroll up and down.
ExampleCorrect quotation in running text.
<p><q>Far back, behind the great mountains of words … live the blind texts.</q> <sup>[1]</sup> After that, things continue as normal.</p>Far back, behind the great mountains of words … live the blind texts.
[1] After that things continue as normal.
Quote within a quote
A quotation within a quotation means quoting a text that already contains a quote. To quote correctly in this case, you need a block quote that contains another quotation as an inline quote.
For both quotes, you need to cite the source according to the above rules of correct citation.