Quotation in HTML – Citation and BlockQuotes

Many times, there is a need to add quotation in HTML. These might include popular sayings, important references, or even addresses. Mostly, the <q> tag is used to define short quotations and the <blockquote> tag is used to define a large quotation. These quotations are displayed as a different text altogether, with different alignment, quotation marks, italicized, etc.

Quotations in HTML

Keeping you updated with latest technology trends, Join DataFlair on Telegram

Quotation in HTML

Let us see HTML quotations with examples:

Syntax of HTML Quotations:
<q>Content</q>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><q>Brick by brick, DataFlair helped me build a future!</q></p>
</html>

Output

HTML quotations

To distinguish these quotes from the HTML document, the following quotation elements are useful-

1. Short Quotations(<q>)

To insert short quotations onto the HTML web page,the <q> element is used. It is a container element, and the text is displayed with quotation marks.
Syntax-
<q>Content</q>
For example,

Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><q>Welcome to DataFlair</q></p>
</html>

Output-

html short quotation

 

<q> is usually used along with the <cite> element.
CSS styling used for short quotes-

a. q{
display: inline;
}

b. q:before{
content: open-quote;
}

c. q:after{
content: close-quote;
}

These attributes can be manipulated as per the developer’s preferences.

2. <blockquote> element

It is to represent some content that has been referenced from some other web-page. It is usually indented by the browser and is used to represent a large quotation, usually.
Syntax-
<blockquote>Content</blockquote>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><blockquote>Welcome to DataFlair</blockquote></p>
</html>

Output-

html blockquote element

Blockquotes are essential in dividing the web-page into sections.

3. <address> element

In order to display an address on the HTML web-page, we use the <address> element. The address could be anything i.e., physical address, e-mail address, social media handle, etc. It is a container element and the text within it is emphasized.
Syntax-
<address>Content</address>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><address>Welcome to DataFlair</address></p>
</html>

Output-

html address element

4. <abbr> element

This element specifies the usage of an abbreviation within the HTML document. In order to show the real word of the acronym/abbreviation, the title attribute can be used.
Syntax-
<abbr>Content</abbr>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><abbr title="DataFlair E-Learning">DataFlair</abbr></p>
</html>

Output-

html abbr element

5. <cite> element

This element specifies the title of some work that has been taken as a reference. It must include the title of the work and is represented as italics, or as emphasized text.
Syntax-
<cite>Content</cite>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><cite>DataFlair E-Learning"</cite></p>
</html>

Output-

html cite element

6. <bdo> element

<bdo> stands for bi-directional text override, and it overrides the current directionality of the text within its tags. It is a container element. We will use the direction (‘dir’ attribute) as ‘rtl’ to display the text from right to left.
Syntax-
<bdo dir=””>Content</bdo>

For example,
Code-

<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
 <body>
<p>Welcome to DataFlair</p>
<p><bdo dir="rtl">Welcome to DataFlair</bdo></p>
</html>

Output-

html bdo element

Tag Function
<abbr> It  defines an acronym or abbreviation.
<address> This is to define the address or contact information of the owner or the organization.
<bdo> It’s for defining the direction of the text.
<blockquote> It defines a particular section that has been taken from another source.
<cite> This is to define the work’s title.
<q> It defines and displays a short quotation.

Summary

In this article, we have learned how to display quotations in HTML. HTML quotation elements are useful to add quotations on an HTML web-page. We have studied the major quotation elements such as <q> for short quotations, <blockquote> for large quotations, <abbr> for acronyms,<address> for contact details and house addresses,<cite> for designation or work title and <bdo> for bidirectional override.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.