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

Tutorial Contents:

  1. What are HTML Quotations?
  2. Quote <q>
  3. Block Quote <blockquote>
  4. Address <address>
  5. Abbreviation <abbr>
  6. Cite <cite>
  7. Bi-Directional Override <bdo>

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:

Output

Wikipedia says:

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 extensive library of elements that are useful for any specific purpose.

Try in CodeLab to Understand the above example clearly.

Example

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>

Try in CodeLab

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:

Short Quote <q> Element

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

Try in CodeLab

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:

Block Quote <blockquote> Element

<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>

Try in CodeLab

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 <address> Element

<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>

Try in CodeLab

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:

Abbreviation <abbr> Element

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

Try in CodeLab

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:

Cite <cite> Element

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

Try in CodeLab

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 <bdo> Element

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

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us