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
.
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.
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.
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.
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
WWF's goal is to: Build a future where people live in harmony with nature.
The quick brown fox jumps over the lazy dog
Output
Build a future where people live in harmony with nature.
The quick brown fox jumps over the lazy dog.
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
The WHO was founded in 1948.
We use HTML to structure our web documents.
Output
The WHO was founded in 1948.
Related Links
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
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
Mozilla Foundation
331 E. Evelyn Avenue
Mountain View, CA 94041, USA
Output
Visit us at:
Example.com
Box 564, Disneyland
USA
Mozilla Foundation
331 E. Evelyn Avenue
Mountain View, CA 94041, USA
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
The Scream by Edvard Munch. Painted in 1893.
The Alchemist is a novel by Brazilian author Paulo Coelho
Output
The Alchemist is a novel by Brazilian author Paulo Coelho.
Related Links
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
This text will be written from right to left
Output