Blockquote

To quote or not to quote

A block quotation is an extract from an other document, set in a distinct typographic block to make it stand out from the surrounding text.
The basic act of quoting another document written by another author (or the same) is very close to the act of blogging. Hence the name.

Table of contents

HTML element <blockquote>

The block quoatation can be marked by the HTML element <blockquote>. The <blockquote> element is a block level element and can contain paragraphs.

It is a block of its own, in contrast to the <q> element which is an inline level element. <q> is used for short quotations embedded in text paragraphs.

The block quotation is a reference to another document and the <cite> element is used to show the reference, the URL, the book, the magazine …

Blogs often link and cite to other blogs and the html structure to add a quotation can be something like this:

The code

<blockquote>
  BLOCKQUOTE is for long quotations (block-level content)
  and Q is intended for short quotations (inline content)
  that don't require paragraph breaks.
  <cite>
    <address>
      <a href="http://www.w3.org/TR/html401....">
        HTML 4.01 Specifications | 9 Text</a>
    </address>
  </cite>
</blockquote>

The result:

BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don’t require paragraph breaks.

HTML 4.01 Specifications | 9 Text

If you look at the code above, the blockquote element contains a paragraph with the actual quote, and a link to the original document.
The cite element is not necessarily an address, as in the example, but if you link to another internet resource you should use the address element.

Many examples exist and you could use the “cite” attribute for the blockquote element as an alternative.
You can find more good examples on the use of blockquote on the microformats.org wiki

Below is the DTD fragment from the HTML4 specification for those who can understand it.

If you need to learn how to read a DTD, go an read the article on the subject on Alistapart
Or have a look at the page from Jukka Korpola: BLOCKQUOTE – long quotation

<!ELEMENT BLOCKQUOTE - - (%block;|SCRIPT)+ -- long quotation -->
<!ATTLIST BLOCKQUOTE
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

<!ELEMENT Q - - (%inline;)*            -- short inline quotation -->
<!ATTLIST Q
  %attrs;                              -- %coreattrs, %i18n, %events --
  cite        %URI;          #IMPLIED  -- URI for source document or msg --
  >

Styling the blockqoute element

The W3C HTMl specification initially recommends that quotes should be rended with quotations marks by the browser according to the language-sensitive manner.

Browser stylesheets often render blockquote elements indented, and the should do so as specified by the W3C HTML specifications.
This styling led to the inproper use of blockquote for indented text only.
The typographical rendering of a blockquote element is often indented but you should really use stylesheets to add padding and margin to a block level element.

Below is a list of links related to blockquote markup, styling and typographic aspects.

Blockquote markup

Styling quotations with blockquote and CSS

Typographic aspects of blockquote

Sorry, comments for this entry are closed at this time.