HTML <blockquote> Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <blockquote> Tag in HTML 5

The <blockquote> tag creates a block container similar to a paragraph except that by default the content is indented and italicized to indicate that it is a quotation. It is one of the block tags used to group content in HTML. It is also one of the sectioning root tags, which means that the sections and headings inside the blockquote element are not included in the outline of any higher level sections.

Example:

The style of the text below should make it obvious that it is a quotation.

In my stars I am above thee; but be not afraid of greatness: some are born great, some achieve greatness, and some have greatness thrust upon 'em. William Shakespeare Twelfth Night Act II Scene 5

This is an actual working example of the <blockquote> tag example code below.

`cite` attribute vs. cite element

The value of the cite attribute is a URL or other URI reference and is not displayed in most browsers. The <cite> tag can be used to cite the title of the source of the quotation.

<blockquote> Tag Syntax

Rules for coding HTML `blockquote` elements

<body>
   ...
   ... flow content expected ...
   <blockquote>
      ... flow content ...
   </blockquote>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Include a blockquote element where flow content is expected.
Begin the blockquote element with a starting <blockquote> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Optionally code a cite attribute with the URL of a document that provides an explanation for the change.
Include any other global attributes inside the starting <blockquote> tag as appropriate.
Inside the blockquote element, between the <blockquote> starting tag and the </blockquote> ending tag, code the inner HTML flow content with the quoted text.
End the blockquote element with a matching </blockquote> closing tag.

Content of the blockquote element

The content of the blockquote element can include HTML comments, text content and any tags that can be used in flow content.

<blockquote> Tag Attributes

Attributes of the <blockquote> tag

global attributes In addition to the personal attributes of the <blockquote> tag below, any of the common HTML attributes can also be coded.

cite="target-URL"
cite="any-URI-ref"

a URI reference (or IRI reference depending on the encoding) that resolves to a URI for the resource containing the source of the quotation

Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference.

If the value of the cite attribute is an HTTP URI, it may contain any of the following components:

protocol scheme, typically http: or else https:
username, followed by an "@"
host name or IP address
port number, which defaults to 80 for the http scheme and 443 for the https scheme
absolute or relative path
search query, indicated by "?"
fragment identifier, indicated by "#"

If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash /..., it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.

`<blockquote>` Tag Examples

Examples of the `<blockquote>` tag in HTML 5

<blockquote> with citation

(see <blockquote> tag demo above)

<p>The style of the text below should make it obvious that it is a quotation.</p>
<blockquote id="example-1"
    cite="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html"
>
<style scoped="scoped">
#example-1 cite::before {
   content: leader(space);
}
#example-1 cite {
   white-space: nowrap;
}
</style>
Be not afraid of greatness: some are born great, some achieve
greatness and some have greatness thrust upon them.
<cite>William Shakespeare Twelfth Night <wbr/>Act II Scene 5</cite>
</blockquote>

Note that the content of the cite element is the title of the source of the quotation, while the value of the <blockquote cite> attribute is a URL or other URI reference. The cite attribute provides a link to the source of the quotation. The HTML 5 specification says that User agents should allow users to follow such citation links using the URL in the cite attribute. At this point, however, none of the browsers actually do.

The white-space: nowrap style prevents the cited title text from breaking in inappropriate places and the <wbr/> tags indicate where line breaks should be placed. The content: leader(space) style adds spaces before the cited work to move the content of the cite element and align it with the right edge of the quote.

Changes in HTML 5 - <blockquote> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the blockquote element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5