HTML Quotations with Examples

HTML Quotations elements are used to put the exact same quote from the author to the HTML document on the webpage that is a portion of the text different from the normal text inserted in the webpage.  Quotation highlights the important content by adding multiple style sheet attributes. Let us understand the HTML quotation in detail.

Features of HTML Quotation

  • HTML Quotations are Block-Level elements as well as Inline element.
  • HTML Quotations are used with the Small tag <q> and with Block tag <blockquote>.
  • HTML Quotations are case sensetive.
  • HTML Quotations element include global Attributes.
  • HTML Quotation element also includes a cite tag for URL references for the content on the webpage.

Types of HTML Quotations

1. HTML Inline <q> Tag:  It is used to quote small highlights text under quotation mark. It starts with opening and ends with closing tags between quote in it, <q>small quote</q>.

<!DOCTYPE html>
<html>
<body>

<h1>The q element</h1>

<p>WELCOME TO CODEDEC 
<q>learn programming here eaisly </q>
.</p>

</body>
</html>

output  : 

 

2. HTML Block-Level <blockquote> Tag: It is used to quote large quotations by changing the alignment and display it as a Block element. It starts with opening and ends with closing tag between Blockquote in it, <blockquote>large quotations <blockquote/>.

 <!DOCTYPE html>
<html>
<body>
<p>CODEDEC-<blockquote> is a site focused on many programming tools and technologies for everyone who wants to learn to program and software development.
At Codedec, You will find useful tutorials from scratch that will be helpful from a beginner level as well as for working professionals..</blockquote></p>
</body>
</html>

output  : 

Examples of HTML Quotations

Eg.1 Quotation with Cite attribute: It renders the text of the HTML element.

 <!DOCTYPE html>
<html>
<body>
<p><cite>PROGRAMMING</cite> is the the new cool.</p>
</body>
</html>

output  :  

Eg.2 Quotation with Bi-directional override tag:  It changes the direction of the HTML text.

<!DOCTYPE html>
<html>
<body>

<p> bdo  changes the direction right to left of the conetent.</p>

<bdo dir="rtl">This is a MIRROR image</bdo>

</body>
</html>

output  : 

Eg.3 Quotation with Abbreviation tag:  HTML <abbr> tag used to shorten the full form of any acknowledged word, It also helps in search engine optimization for the webpage.

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="Indian Space Research Organization"> ISRO </abbr> BEGAN IN 1962.</p>

</body>
</html>

 

output  :