New Components

Quotation

A quotation is a reference to a source of information, typically taken from a written text or an oral statement.

When to use

  • To attribute ideas or words to their original author.
  • To provide evidence or examples to support your arguments.
  • To add credibility to your content.
  • To highlight important viewpoints.

When not to use

  • To fill content with unnecessary quotes.
  • When the quote doesn't add significant value to the content.
  • For the sole purpose of emphasizing words or phrases, or for styling purposes.

Types of quotations

  • In-line quotation : Appears within a sentence or paragraph
  • Block quotation : Standalone and spans over multiple lines

On this page

Keywords

  • Quotation : A quotation refers to a portion of text content that is attributed to an external source or a specific speaker, and is marked up using semantic HTML elements to convey its nature to both visual users and assistive technologies.

Breakdown of Components

In-line quotation

An inline quotation is a short quote that appears within a paragraph or sentence. It uses the HTML <q> tag, which automatically wraps the content in quotation marks (for most modern browsers).

HTML
<p>Accessibility :
  <q> support for the social inclusion of people with disabilities.</q>
  Building an inclusive world. 
</p>

Block quotation

A block quotation is used for longer quotations that typically span multiple lines or paragraphs. It is displayed as a separate block of content and also provides information regarding its source.

  • The text of the quote must be embedded in a <blockquote> tag. The <blockquote> element indicates a long quote with block-type content.
  • The cite attribute contains a URL that identifies the source document or message for the quoted information. It is intended to reference material that provides context or explains the origin of the quote. This attribute is optional and should be removed if there is no URL redirecting to the source.
  • The reference to the source must be placed in a <cite> tag and thus appear in italics.
HTML
<blockquote cite="https://www.dicocitations.com/citations/citation-48599.php">
   <p>Writing cannot grasp knowledge, for knowledge, unlike information, does not exist outside of man.</p>
</blockquote>
<p>- Socrate,
   <cite>Socrates' interviews.</cite>
</p>

Screen reader

  • When navigating with a screen reader, users should be able to distinguish quoted content from surrounding text.
  • Screen readers should announce the source of the quote when the <cite> tag is used.
  • Screen readers should be able to navigate the content inside the <blockquote> tag.

On this page