HTML Quotation and Citation Elements

In this tutorial, you will learn HTML Quotation and Citation Elements

HTML provides several elements for marking up quotations and citations. These elements are designed to provide semantic meaning to the content, making it easier for search engines and assistive technologies to understand the structure of the content. Here are some of the most commonly used quotation and citation elements in HTML:

<blockquote>: The <blockquote> element is used to mark up a section of content that is a quotation from another source. The content inside the <blockquote> element should be indented to visually distinguish it from the surrounding content.

<blockquote>
  "Be the change you wish to see in the world"
  <cite>Mahatma Gandhi</cite>
</blockquote>

<q>: The <q> element is used to mark up a short, inline quotation. The content inside the <q> element should be surrounded by quotation marks.

<p>As he walked by, he said <q>Hello!</q> </p>

<cite>: The <cite> element is used to mark up the title of a work that is being quoted or cited. The content inside the <cite> element should be the title of the work, and it is typically rendered in italic by default.

<blockquote>
  "Be the change you wish to see in the world"
  <cite>Mahatma Gandhi, "An Autobiography: The Story of My Experiments with Truth"</cite>
</blockquote>

<abbr>: The <abbr> element is used to mark up an abbreviation or acronym. Use the title attribute to provide the full term or phrase.

<p>The <abbr title="World Wide Web">WWW</abbr> is a vast network of interconnected documents.</p>

<dfn>: The <dfn> element is used to mark up the defining instance of a term. By using the <dfn> it indicates that this is the first mention of this term.

<p>According to the <dfn>Oxford English Dictionary</dfn>, the word "blog" was first used in 1999.</p>

It’s also common to use the <time> element to mark up the date or time of a citation or quotation. These elements allow the developer or user agent to understand the meaning of the information and to interpret them, it also makes the content more accessible for those who use assistive technology.

Scroll to Top