HTML Quotations - A Deep Guide on Citations and Other Quoting Elements

1. Introduction to HTML Quotations

First of all HTML quotations are some certain specific HTML elements, which we use to display certain types of data. Also, the data is of different categories. This data may contain quotes, block quotes, citations, addresses, abbreviations, and bi-directional override. See the list below:

1.1. Types of HTML Quotations And Citations

• <q> for quotes
• <blockquote> is an element for block quotations
• <abbr> for abbreviations
• <address> an element to write addresses
• <cite> for citations
• <bdo> for bir-directional override

Also HTML quotations are important for certain developers. Which certainly come in handy when there is a need to quote somebody, or quote with reference to some book or some website. Luckily we have an example for you to try in codelab:

Try in CodeLab to Understand the above example clearly.

Wikipedia says:
<blockquote cite="https://en.wikipedia.org/wiki/HTML">HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
These elements are the building blocks of web pages. They can be used to create images, links, tables, certain lists, or forms. Usually, HTML has an extensive library of elements that are useful for any specific purpose.</blockquote>

2. Short Quote <q> HTML Element

First of all, this element is for short HTML quotations. Short quotes are useful for certain developers. Meanwhile, they use this element to display short quotations on the screen. Importantly, the browser also adds double quotations around <q> quotes. To understand check the following example:

<p>Simone de Beauvoir says: <q>Change your life today. Don't gamble on the future, act now, without delay.</q></p>

3. Block Quote <blockquote> HTML Element

For long quotations, the blockquote HTML element helps. It uses <blockquote> element to undergo the function. Unlike <q>, the browser indet the block quoted text. The blockquote tag also gets a cite attribute. Which contains the source link of the quotation. To understand this, check the following example:

<p>Simone de Beauvoir says:</p>
<blockquote cite="https://www.brainyquote.com/quotes/henry_b_eyring_590592">We live in a world where finding fault in others seems easy. It has long been the basis of political campaign strategy. It is the theme of much television programming across the world. Whenever we meet anyone, our first, and almost reaction may be to look for imperfections.
</blockquote>

4. Address <address> HTML Element

While we need to mention or cite the address of some writer or owner of a house, we make use of this <address> tag. Usually the browsers display the address in the italic form. You may understand by following example:

<address>
This book is written by John William
Contact Him at john@gmail.com
Or Pay a Visit at his home:
PO Box 234 California,
USA
</address>

5. Abbreviation <abbr> HTML Element

Abbreviations and acronyms uses <abbr> HTML element for its definition. Also it takes title as attribute. Furthermore the  browsers, translating softwares and search engines gets useful information from this element. See an example below for instance:

<p>Since the world is continuously populating, therefore <abbr title="World Health Organization">WHO</abbr> is taking measures for the eradication of diseases.
</p>

6. Cite <cite> HTML Element

Whenever we need to define the title of some work, we use the <cite> element. Furthermore, the browser usually displays the cited title in italic form. You can understand this by the following example:

<p>Certainly the most famous book and also world bestseller <cite>Harry Potter</cite> was written by J. K Rowling
</p>

7. Bi-Directional Override <bdo> Element

It stands for the bi-directional override and its main use is to change the direction of the current text. This element takes the dir attribute to change the text direction. Try the following example as an instance in Codelab.

<bdo dir="rtl">Most importantly all browsers will understand this element and writes this text from right to left.
</bdo>