HTML Quotation and Citation Elements

HTML has features for marking up quotations from other sources, writing contact address details, defining abbreviations, and title of creative work.

The following HTML elements are covered in this article to decribed: blockquote, q, abbr, address, cite, and bdo.

The HTML blockquote element defines quotes (piece of text) from another source (a website, a blog, a book, etc).

A quote is a sentence, paragraph, multiple paragraphs, a list, etc.

blockquote elements are typically indented (left and right margins) by browsers.

For example, the following markup is taken from WWF's website.

<p>Here is a quote from WWF's website:</p>
    
<blockquote cite="http://www.worldwildlife.org/who/index.html">
    The world's leading conservation organization, 
    WWF works in 100 countries and is supported by 1.2 million members 
    in the United States and close to 5 million globally.
</blockquote>

Output

Note: Don't forget to Include a URL inside a citation attribute that points to the quote source.

The HTML q element defines a short inline quotation and it doesn't require paragraph breaks.

Browsers normally insert quotation marks around the quoted text.

Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<p><q>The quick brown fox jumps over the lazy dog</q></p>

Output

The HTML abbr tag defines an abbreviation of a term instead of providing a full definition of a term.

For example, "USA", "UK", "Mr.", "Miss.", "WWW", "HTML", and etc.

Note: Use the global title attribute to indicate the complete text of abbreviation when the mouse is moved over the element (shown as tooltips).

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

Output

The HTML address tag defines contact details for the author/owner name, email address, phone number, etc of a webpage, blog, or article.

The contact information may be an email address, Web URL address, home or office address, phone number, etc.

An address block is typically displayed in italic in most browsers and a line break will always be inserted before and after the address element.

Example

<address>
Written by John Doe.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
<address>
Mozilla Foundation<br />
331 E. Evelyn Avenue<br />
Mountain View, CA 94041, USA
</address>

Output

The title of a piece of creative work is defined by the HTML cite tag.

Note: The title of work could not be an individual person's name or a place name.

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<p><cite>The Alchemist</cite> is a novel by Brazilian author Paulo Coelho </p>

Output

The HTML bdo element is used to write a word or phrase in reverse order from right to left.

In order for a text to be reversed from right to left, the dir attribute must be mentioned within the bdo tag.

It's useful while using RTL languages like Arabic or Hebrew.

Example

<bdo dir="rtl">This text will be written from right to left</bdo>

Output