HTML Quotation and Citation Elements

This chapter goes through the HTML elements for quotations and citations: <blockquote>, <q>, <abbr>, <address>, <cite>, and <bdo>.

HTML <blockquote> for Quotations

The <blockquote> element marks a section quoted from another source. Browsers usually indent it. Use the cite attribute to point to where the quote came from.

Example

A quote from WWF's website inside a <blockquote>.

A page with a blockquote quoting WWF's website (with a cite attribute pointing to the source URL), introduced by a paragraph. Browsers indent the blockquote.

> Output: complete HTML page

Prompt

A page with a blockquote quoting WWF's website (with a cite attribute pointing to the source URL), introduced by a paragraph. Browsers indent the blockquote.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote</title>
</head>
<body>

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>

</body>
</html>

HTML <q> for Short Quotations

The <q> tag marks a short, inline quotation. Browsers normally add quotation marks around it.

Example

A short quotation inside a paragraph.

A page with a short inline quotation using the q element inside a paragraph: WWF's goal is to "Build a future where people live in harmony with nature." Browsers add the quotation marks.

> Output: complete HTML page

Prompt

A page with a short inline quotation using the q element inside a paragraph: WWF's goal is to "Build a future where people live in harmony with nature." Browsers add the quotation marks.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Short Quote</title>
</head>
<body>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

</body>
</html>

HTML <abbr> for Abbreviations

The <abbr> tag marks an abbreviation or acronym, like "HTML", "CSS", or "ASAP". Marking abbreviations helps browsers, translation tools, and search engines.

Tip: Use the global title attribute to show the full description when the user hovers over it.

Example

The abbreviation WHO with its full name in a title.

A page using the abbr element to mark the abbreviation WHO, with a title attribute "World Health Organization" shown on hover. Sentence: "The WHO was founded in 1948."

> Output: complete HTML page

Prompt

A page using the abbr element to mark the abbreviation WHO, with a title attribute "World Health Organization" shown on hover. Sentence: "The WHO was founded in 1948."

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abbr</title>
</head>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body>
</html>

HTML <address> for Contact Information

The <address> tag marks the contact information for the author or owner of a document or article. That can be an email, URL, physical address, phone number, or social handle. The text usually renders in italic, and browsers add a line break before and after it.

Example

Contact information inside an <address>.

A page using the address element for contact information: written by John Doe, with a visiting address. Browsers render it in italic with line breaks before and after.

> Output: complete HTML page

Prompt

A page using the address element for contact information: written by John Doe, with a visiting address. Browsers render it in italic with line breaks before and after.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address</title>
</head>
<body>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

HTML <cite> for Work Title

The <cite> tag marks the title of a creative work, such as a book, song, movie, or painting. A person's name is not the title of a work. The text usually renders in italic.

Example

The title of a painting marked with <cite>.

A page using the cite element for the title of a creative work: "The Scream" by Edvard Munch, painted in 1893. The title renders in italic.

> Output: complete HTML page

Prompt

A page using the cite element for the title of a creative work: "The Scream" by Edvard Munch, painted in 1893. The title renders in italic.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cite</title>
</head>
<body>

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

</body>
</html>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override. The <bdo> tag overrides the current text direction, for example to write text from right to left.

Example

Text forced to run right to left with <bdo>.

A page using the bdo element with dir="rtl" to override text direction: "This text will be written from right to left".

> Output: complete HTML page

Prompt

A page using the bdo element with dir="rtl" to override text direction: "This text will be written from right to left".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bdo</title>
</head>
<body>

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

</body>
</html>

HTML Quotation and Citation Elements

A quick reference: <abbr> defines an abbreviation or acronym, <address> defines contact information, <bdo> defines the text direction, <blockquote> defines a quoted section, <cite> defines the title of a work, and <q> defines a short inline quotation.