HTML Text Quotation

HTML text Quotations and Citations includes the following:

1. <abbr>: It defines the abbreviation or acronym of any things.
2. <address>: It defines the address or any useful info of author.
3. <cite>: It defines the title of a project or work.
4. <q>: It defines a short quotation.
5. <blockquote>: It defines a section covered from another sources.
6. <bdo>: It defines the direction of texts.

Click Here, to learn more about HTML <abbr> tag
Click Here, to learn more about HTML <address> tag
Click Here, to learn more about HTML <cite> tag
Click Here, to learn more about HTML <q> tag
Click Here, to learn more about HTML <blockquote> tag
Click Here, to learn more about HTML <bdo> tag

Now lets see one by one:

1. HTML <abbr> element

It defines the abbreviation or acronym of any things.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<p><abbr title= "Hypertext MarkUp Language"> HTML </abbr> is not a programming language but a markup language.
</p>
</body>
</html>

Output

HTML is not a programming language but a markup language.

When you hover over the word "HTML", you will see Hypertext MarkUp Language which denotes the abbreviation of HTML.
You should know that <abbr> element is always associated with the title attribute.

2. HTML <address> element

It defines the address or any useful info of author.
They are generally displayed in italic font-style.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<address>
Website: myhtml5tutorials.com <br>
Written by: Swamikanta Longjam <br>
Wangoi Sub-Division <br>
Manipur,India <br>
</address>
</body>
</html>

Output

Website: myhtml5tutorials.com
Written by: Swamikanta Longjam
Wangoi Sub-Division
Manipur,India

How to use <address> element?

You should take caution while using the <address> tag such that you should not use this tag for making style in a postal address. Use <p> or <div> element along with CSS Properties to style them.
At least try to use this at the <footer> section.
Note that <address> element should be used to provide contact Info like Social Media URLs, Email etc. related to the current page or document or article.

3. HTML <cite> element

It defines the title of a project or work.
They are also displayed in italic font-style.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<img src="js_book.png" alt="Book">
<p> <cite> A book </cite> for JavaScript written by Nicholas C. Zakas. </p>
</body>
</html>

Output

Book

A book   for JavaScript written by Nicholas C. Zakas.

Only the title name should be write within the <cite> element. A person's name could not be a title of a project.
You should know that In HTML 4.01, the <cite> tag defines a citation.

4. HTML <q> element

It defines a short quotation.
Inserting this tag will automatically add double inverted comma around this element.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<p>
The main motto of every school is <q> To nurture and foster children to become a responsible citizen</q>.
</p>
</body>
</html>

Output

The main motto of every school is To nurture and foster children to become a responsible citizen.

Do You Know?

The <q> tag is used only for short sentence.
If you have to use multiple quote sentences, use <blockquote> tag.

5. HTML <blockquote> element

It defines a class or section covered from another sources.
The cite attribute is used to the <blockquote> element to cover the source from a URL.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<blockquote cite="https://www.olympic.org/the-ioc"> The IOC is a not-for-profit independent international organization made up of volunteers. The IOC President presides over all its activities, while the IOC Session and Executive Board are responsible for taking the main decisions for the organization. </blockquote>
</body>
</html>

Output

The IOC is a not-for-profit independent international organization made up of volunteers. The IOC President presides over all its activities, while the IOC Session and Executive Board are responsible for taking the main decisions for the organization.

Default CSS properties of <blockquote> element

blockquote {
    display: block;
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 40px;
    margin-left: 40px;
}

6. HTML <bdo> element

It has the acronym of bi-directional override and defines the direction of texts.
The dir attribute is used to to the element to change the direction of texts.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<bdo dir="rtl"> We could not live without water. </bdo>
<!-- rtl= "right to left" -->
</body>
</html>

Output

We could not live without water.

Points to be Noted

By Default, the text <bdo> is from left to right i.e. ltr.
Without the dir attribute, <bdo> tag is not defined in HTML document. Be sure to add dir attribute with its value.

Summary

Tag Name Property (Notes)
<abbr> It defines the abbreviation or acronym of any things.
<address> It defines the address or any useful info of author.
<cite> It defines the title of a project or work.
<q> It defines a short quotation.
<blockquote> It defines a section covered from another sources.
<bdo> It defines the direction of texts.

More Reference

You should learn all these tags to know where, when to use them properly.
You can find all of these tags separately within the taglists.



Some important questions of this page

1. Which HTML tag can give the address or any useful info of author?

See Answer

<address> tag

2. Which HTML tag defines the title of a project or work?

See Answer

<cite> tag

3. Which HTML tag can defines a short quotation?

See Answer

<q> tag.

4. Which HTML tag defines a section covered from another sources?

See Answer

<blockquote> tag.

5. Which HTML tag can change the direction of texts?

See Answer

<bdo> tag.