HTML Quotations

Understanding HTML Quotations

HTML provides the <blockquote> and <q> elements for identifying text quoted from another source. The element you choose depends primarily on whether the quotation is presented as a separate block or within surrounding text.

Using quotation elements gives quoted content meaningful structure rather than relying only on quotation marks, indentation, or other visual formatting. The source of a quotation can also be identified with the cite attribute when an appropriate source URL is available.

Block Quotations

The <blockquote> element represents a quotation from another source that is presented as a separate block of content. It is commonly used for longer quotations that stand apart from the surrounding paragraphs.

<blockquote>
  <p>This is a longer quotation presented as a separate block of content.</p>
</blockquote>

A <blockquote> can contain paragraphs and other appropriate flow content. Browsers commonly indent block quotations by default, but the element should be used because the content is a quotation, not simply to indent text.

Inline Quotations

The <q> element represents a short quotation that appears within a paragraph or other surrounding text.

<p>The instructor said, <q>Practice writing HTML every day.</q></p>

Browsers normally add appropriate quotation marks around content inside the <q> element, so quotation marks generally should not be typed manually around it.

The cite Attribute

The cite attribute can be used with <blockquote> or <q> to provide a URL that identifies the source of the quotation.

<blockquote cite="https://www.example-web.site/article.html">
  <p>This quotation comes from another webpage.</p>
</blockquote>

The cite attribute provides source information in the markup but does not normally create a visible citation or clickable link for visitors. If readers should see or follow the source, include that information visibly in the page content as well.

HTML Quotation Example

The following example demonstrates both a block quotation and an inline quotation.

<h2>Learning HTML</h2>

<p>A web instructor once said, <q>The best way to learn HTML is to write it.</q></p>

<blockquote cite="https://www.example-web.site/html-guide.html">
  <p>Learning HTML becomes easier when you experiment with elements and see how the browser displays them.</p>
</blockquote>

Try changing the <q> and <blockquote> elements in the editor to compare how the browser handles inline and block quotations.

<blockquote> vs <q>

Use <blockquote> when the quotation should form a separate block of content. Use <q> when a short quotation is part of a sentence or paragraph.

<blockquote>
  <p>This quotation stands on its own as a block.</p>
</blockquote>

<p>She said, <q>This quotation is part of the paragraph.</q></p>

The choice should be based on the role of the quotation in the content rather than on which default browser style you prefer.

Quotation Marks

When using the <q> element, browsers normally supply quotation marks automatically. This allows the browser to use quotation marks appropriate for the language and context of the document.

<p>She replied, <q>Yes, the page is finished.</q></p>

The <blockquote> element does not automatically require visible quotation marks. Its block-level presentation already identifies the quoted content structurally, and its visual appearance can be controlled with CSS.

Styling Quotations with CSS

CSS can control the visual appearance of quotations without changing their HTML meaning. A block quotation might use a border, additional padding, different text styling, or other visual treatment.

blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 4px solid #777777;
}

Use HTML to identify the content as a quotation and CSS to determine how that quotation is presented.

Quotation Best Practices

• Use <blockquote> for quotations presented as separate blocks of content.
• Use <q> for short quotations within surrounding text.
• Do not use <blockquote> simply to indent ordinary content.
• Do not manually add quotation marks around content inside a <q> element.
• Use the cite attribute when an appropriate source URL should be identified in the markup.
• Provide a visible citation or link when readers need to know or access the source.
• Use CSS to control the visual appearance of quotations.

Summary

HTML provides the <blockquote> element for quotations presented as separate blocks and the <q> element for short inline quotations. The cite attribute can identify a source URL, while visible source information should be included in the content when it is useful to readers.