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
The <q> element is used for short quotations; the browser inserts double quotation marks around the content text.
<p> <strong> Gandhi Said </strong> <q> Live as if you were to die tomorrow. Learn as if you were to live forever </q> <p>
Gandhi SaidLive as if you were to die tomorrow. Learn as if you were to live forever
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.
<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>
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.
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.
<p>Welcome to <abbr title="TechGeekBuzz">TGB</abbr> </p>
When you hover over the acronym you will get its full meaning.
Welcome to TGB
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.
<address> Country: India.<br> City: New-Delhi <br> PhNo: 9911991199 </address>
Country: India. City: New-Delhi PhNo: 9911991199
Generally, <cite> element is used to represent the title of the content, and the browser shows the cited content in italic format.
<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
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.
<bdo dir="rtl">Welcome to TechGeekBuzz</bdo>
Output: Welcome to TechGeekBuzz
- <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.