HTML Quotation and Citation Elements

By | February 21, 2021
HTML Quotation and Citation Elements

In HTML, we have different elements and methods to represent quotation and cite text. <q>, <blockquotes>, <abbr>, etc. are some of the popular elements for quotation and here in this tutorial we have mentioned all those elements you must know.

HTML Quotation and Citation Elements

HTML <q> Element

Vamware

The <q> element is used for short quotations; the browser inserts double quotation marks around the content text.

Example

<p> <strong> Gandhi Said </strong> <q> Live as if you were to die tomorrow. Learn as if you 
were to live forever </q> <p>

Output

Gandhi Said   Live as if you were to die tomorrow. Learn as if you were to live forever 

HTML <blockquote>

It is similar to <q> element. It is used to represent those quotes that have been picked from another source.

Unlike <q> it does not quote the text in a double inverted comma, instead it uses indentation to display the quotation.

Example

<p>About Python:</p>

<blockquote cite="https://www.techgeekbuzz.com/learn-python-programming/">

Python is the most powerful and widely used programming language of 2019. In the past
few years, it has hyped the usages on the next level. Now Python is everywhere from 
web-development to Artificial Intelligence.

</blockquote>

Output

About Python:

Python is the most powerful and widely used programming language of 2019. In the past few years, it has hyped the usages on the next level. Now Python is everywhere from web-development to Artificial Intelligence.

The cite attribute describes the source location from where the quote has been picked.

HTML <abbr>

The <abbr> element stands for abbreviation, using this HTML element we can define the full form of any abbreviation or acronym.

The title attribute should be mentioned inside the <abbr> tag, that defines the acronym meaning.

Example

<p>Welcome to <abbr title="TechGeekBuzz">TGB</abbr> </p>

When you hover over the acronym you will get its full meaning.
Output

Welcome to TGB

HTML <address>

As the element name suggests, <address> is used to display the contact or address information about the user or document.

The browser parses the address content and displays it in italic format.

Example

<address>
Country: India.<br>
City: New-Delhi <br>
PhNo: 9911991199
</address>

Output

Country: India.
City: New-Delhi 
PhNo: 9911991199

HTML <cite>

Generally, <cite> element is used to represent the title of the content, and the browser shows the cited content in italic format.

Example

<p><cite>The Alchemist </cite> is a novel by Brazilian author Paulo Coelho </p>
Output
The Alchemist  is a novel by Brazilian author Paulo Coelho

HTML <bdo>

The <bdo> element can reverse its text content from right to left.

To reverse a text from right to left, we need to mention the dir attribute inside the <bdo> tag.

Example

<bdo dir="rtl">Welcome to TechGeekBuzz</bdo>
Output:
Welcome to TechGeekBuzz

Summary

  • <q> tag put double inverted common before and after the text.
  • <blockquote> it indents the quotation text.
  • <abbr> used to define the acronym meaning.
  • <cite> it is used to represent the title of the text.
  • <bdo> it overrides the text direction.

Leave a Reply

Your email address will not be published. Required fields are marked *