In this article, you will read about HTML quotes and also learn to use different types of HTML Quotation and Citation Elements with the help of examples.
HTML Quotation
The HTML Quotes or Quotation elements are used to add quoted texts on web page. These quoted text are different from the normal text displayed on a web pages.
Some of the most commonly used quote elements in HTML along with description are given in the table below;
| S.No | Tags | Description |
|---|---|---|
| 1. | <q> | To display short inline quotation |
| 2. | <blockquote> | To display a portion that is quoted from another source |
| 3. | <abbr> | To display an abbreviation or acronym |
| 4. | <address> | To display contact information of the author/owner on webpage |
| 5. | <cite> | To display the title of a work |
| 6. | <bdo> | To display the text direction |
Let's understand these HTML Quotation and Citation Elements one by one with depth.
HTML <q> Element
The html <q> element is used for short inline quotation. The <q> elements are very useful when we put quotation on any web that does not require paragraph breaks. It begins with <q> tag and ends with </q> tag.
Now let's understand html <q> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html q element Example</title>
</head>
<body>
<p> This is a paragraph with <q>Short Inline Quotation</q> text.</p>
</body>
</html>
Output
HTML <blockquote> Element
The html <blockquote> element is mostly used when we put quotes from other source on our html document. In other words, <blockquote> is the element used to display long quotations (a quote from another source). It begins with <blockquote> tag and ends with </blockquote> tag.
Now let's illustrate html <blockquote> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html blockquote element Example</title>
</head>
<body>
<p> This is a simple paragraph. </p>
<blockquote> This is a paragraph where we have used the HTML blockquote element. </blockquote>
</body>
</html>
Output
HTML <abbr> Element
The html <abbr> element is used to display an acronym or abbreviations (like HTML, CSS, HTTP etc.) on a web page. It begins with <abbr> tag and ends with </abbr> tag.
Now let's understand html <abbr> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html abbr element Example</title>
</head>
<body>
<p> This is a paragraph with <abbr title="html abbr element">acronym or abbreviations</abbr> text.</p>
</body>
</html>
Output
HTML <address> Element
The HTML <address> element is used to display contact information of a person, or a author, or an organization on a web page. It begins with <address> tag and ends with </address> tag.
Now let's illustrate html <address> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html address element Example</title>
</head>
<body>
<p> Welcome to Answersjet.com If you like our products and services then contact us to </p>
<address> Deepak Thakur<br>
Vill. Har-Gatla<br>
Teh. Nurpur Dist. Kangra<br>
Himachal Pradesh Pin-145021
</address>
</body>
</html>
Output
HTML <cite> Element
The html <cite> element is used to display the title of creative work (like paintings, movies, poems, books, website etc.) on a web page. It begins with <cite> tag and ends with </cite> tag.
Now let's understand html <cite> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html cite element Example</title>
</head>
<body>
<p> Welcome to <cite>Answersjet</cite>. We serve best content on html, python, java, swift, c++ etc.</p>
</body>
</html>
Output
HTML <bdo> Element
The <bdo> stands for Bi-Directional Override. The html <bdo> element is used to override the default text direction on a web page. The <bdo> element is used to override the default text direction so that text are rendered in a different direction on a web page.
Now let's illustrate html <bdo> element with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html bdo element Example</title>
</head>
<body>
<p> Welcome to Answersjet.com We serve best content on html, python, java, swift etc. </p>
<p><bdo dir="rtl"> Welcome to Answersjet.com We serve best content on html, python, java, swift etc.</bdo></p>
</body>
</html>
Output
Conclusion
We have learnt about HTML quotes and also learn to use different types of HTML Quotation and Citation Elements with the help of examples. The HTML Quote or Quotation elements are used to add quoted texts on web page. These quoted text are different from the normal text displayed on a web pages.