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.

It is also used for internal quotations and citations omitted, quotations and in-text citations html, escape quotations html, quotation template, inside quotations marks in string, quotation symbol.

HTML <blockquote> for Quotations

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

Here is a quote from WWF's website:

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.

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

It is also used for html blockquote quotation marks, blokquote style, code, inside paragraph, double quotations blockquote for quotations

HTML <q> for Short Quotations

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

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

It is also used for q element, q cite, q vs blockquote, q and a list, q&a template and code

HTML <abbr> for Abbreviations

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 WHO was founded in 1948.

We use HTML to structure our web documents.

It is also used for abbr tag, abbr style, remove underline, abbreviation meaning, list, text, acronyms, content and abbreviation in computer.

HTML <address> for Contact Information

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

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

Mozilla Foundation
331 E. Evelyn Avenue
Mountain View, CA 94041, USA

It is also used for address input, form, box, book template, address tag itemscope, address element, address link to google map.

HTML <cite> for Work Title

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 Scream by Edvard Munch. Painted in 1893.
The Alchemist is a novel by Brazilian author Paulo Coelho.

It is also used for cite quote, source, style, code, html form cite, cite inside blockquote.

HTML <bdo> for Bi-Directional Override

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

This text will be written from right to left

It is also used for bdo dir, bdo element, bdo html code, what is bdo in html, what is bdo use in html.