HTML Quotation

A quotation is a group of words taken from another source.

The HTML has various elements like <q>, <blockquote>, <abbr>, <cite>, <address> and <bdo> for defining different types of quotes and citations.

Let's discuss them in detail to understand their proper use in HTML.

HTML <q> Element

The HTML <q> element is used to define a short quotation.

It means when we want to show a quotation on a web page that is short in length, we will use the HTML <q> element.

The quotation is written between the start tag <q> and the end tag </q>.

While displaying the page, web browsers automatically insert quotation marks around the text that is written within <q> and </q> tags.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML q Tag Example</title>
</head>

<body>

<h1>q Tag Example</h1>

<p>Lord Krishna - <q>A man is made by his beliefs. As he believes. So he becomes.</q></p>

</body>

</html>

Result on Editor

HTML <blockquote> Element

The HTML <blockquote> element also defines a quotation, but the browser does not insert quotation marks. Instead, it indents the quotation, i.e. it adds space before the start of the quotation.

Though it is not mandatory, the <blockquote>, as the name suggests, is generally used for a block of text.

The quotation is written between the opening tag <blockquote> and the closing tag </blockquote>.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML blockquote Tag Example</title>
</head>

<body>

<h1>blockquote Tag Example</h1>

<p>Quote from NASA:</p>

<p><blockquote cite="https://www.nasa.gov/about/index.html">The National Aeronautics and Space Administration is America's civil space program and the global leader in space exploration. The agency has a diverse workforce of just under 18,000 civil servants, and works with many more U.S. contractors, academia, and international and commercial partners to explore, discover, and expand knowledge for the benefit of humanity.</blockquote></p>

</body>

</html>

Result on Editor

Click 'Result on Editor' to view the difference between the <q> and <blockquote> elements.

HTML <abbr> Element

We use the HTML <abbr> element to display abbreviations and acronyms on web pages.

An abbreviation is a shortened form of a word, while an acronym is the initials of a word or name.

An abbreviation or acronym is written between the start tag <abbr> and the end tag </abbr>.

While processing, the translation systems and search engines identify text written in <abbr> as an abbreviation and treat them differently than the other text on the web page.

We can use the HTML title attribute on abbreviations to hint at their complete names. See the example below.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML abbr Tag Example</title>
</head>

<body>

<h1>abbr Tag Example</h1>

<p>The <abbr title="National Aeronautics and Space Administration">NASA</abbr> is America's civil space program and the global leader in space exploration.</p>

</body>

</html>

Result on Editor

HTML <cite> Element

To display the title of a creative work, HTML uses <cite> element.

The title is written between the start tag <cite> and the end tag </cite>.

Translation systems identify the content of the <cite> element and differentiate it from the other text on the page. And hence during the translation, the title is not translated.

While displaying the web page browsers italicize the text within the <cite> and <cite> tags.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML cite Tag Example</title>
</head>

<body>

<h1>cite Tag Example</h1>

<p>The title of a work should be written with cite element.</p>
<p>Joanne Rowling wrote <cite>Harry Potter</cite>, a seven-volume children's fantasy series published from 1997 to 2007.</p>

</body>

</html>

Result on Editor

HTML <address> Element

As the name indicates, this HTML element defines the contact information of someone on a web page.

Contact information can be anything from the physical location to email address, mobile number etc.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML address Tag Example</title>
</head>

<body>

<h1>address Tag Example</h1>

<p>Contact information on webpages should always be written with address element.</p>
<p>Smith John</br>Location:</br>Lotus Villa, New Delhi</br>India</p>

</body>

</html>

Result on Editor

The browser automatically adds a line break before and after the <address> element.

The content of the <address> element is displayed in italic.

HTML <bdo> Element

The <bdo> element is used to change the text direction of the content. BDO is an acronym for Bi-Directional Override.

The text whose direction is to be changed is written between the <bdo> and </bdo> tags.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML bdo Tag Example</title>
</head>

<body>

<h1>bdo Tag Example</h1>

<p>The text direction for the below line is right to left (rtl).</p>
<bdo>The full form of BDO is Bi-Directional Override</bdo>

</body>

</html>