HTML Quotations

Please Share On:

The HTML quotations element are used to insert quotation texts on your web pages. The HTML quotations apply text looks slightly different and smaller than normal text.

In this tutorial, you are going to learn the following HTML quotations:

  1. <abbr> …. </abbr>
  2. <address> … </address>
  3. <bdo> … </bdo>
  4. <blockquote> … </blockquote>
  5. <cite> … </cite>
  6. <q> … </q>

1) <abbr> …. </abbr>

The <abbr> HTML element has both opening and closing tags. It is used to define a text as an abbreviation or an acronym. For example: “WHO”, “NASA”, “HTML”, “CSS” etc.

Syntax:

<abbr title="HyperText Markup Language"> HTML </abbr>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>
 
  <body>
    <p> This is <abbr title = "HyperText MarkUp Language">HTML </abbr>Language</p>
    <p> This is <abbr title = "Cascading Style Sheet">CSS </abbr>Language</p>  
  </body>
</html>

Output:

2) <address> … </address>

The <address> HTML element has both opening and closing tags. It is particularly used to define the address on your web pages. The text in <address> elements is usually displayed in italic.

Syntax:

<address>
Unit 3A <br>
170 Ninth Avenue <br>
Campsie NSW 2194 <br>
Sydney Australia <br>
</address>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>
 
  <body>
    <h3> HTML address element</h3>
      <p>See an example of using address quotation. </p>
    
   <address>
      Unit 3A <br>
      170 Ninth Avenue <br>
      Campsie NSW 2194 <br>
      Sydney Australia <br>
   </address> 
  </body>
</html>  

Output:

3) <bdo> … </bdo>

The <bdo> HTML element has both opening and closing tags. The BDO stands for bi-direction Override. It is used to override the current text direction.

Syntax:

<bdo dir="rtl"> Your text goes here ... </bdo>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>

  <body>
    <h3> HTML bdo element</h3>
    <p>See an example of using bdo quotation. </p>

    <p>
      <bdo dir="ltr"> 
        The BDO stands for bi-direction Override. It is used to override the current text direction.
      </bdo>
    </p>

    <p>
      <bdo dir="rtl"> 
        The BDO stands for bi-direction Override. It is used to override the current text direction.
      </bdo>
    </p>
  </body>
</html>    		
                    

Output:

4) <blockquote> … </blockquote>

The <blockquote> HTML element has both opening and closing tags. The <blockquote> elements is also used for quotations of texts. Instead of putting your text in quotes, it used an alignment and keep the text different from another.

Syntax:

<blockquote> 
  It had opening and closing tags.
</blockquote>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>
 
  <body>
    <h3> HTML blockquote element</h3>
      <p>See an example of using blockquote quotation. </p>
    
   <blockquote> 
   	 It had opening and closing tags. It is also used for quotations of texts. 
     Instead of putting your text in quotes, it used an alignment and keep 
     the text different from another.
  </blockquote> 
  </body>
</html>

5) <cite> … </cite>

The <cite> HTML element has both opening and closing tags. It is used to define the title of a work.

Syntax:

<cite> Your title of a work. </cite>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>

  <body>
    <h3> HTML cite element</h3>
    <p>See an example of using cite quotation. </p>

    <p>
      The <cite>Google</cite> is the mostly used search engine in the world.
    </p>
  </body>
</html>    		
       

Output:

6) <q> … </q>

The <q> HTML element has both opening and closing tags. The q element is used to put text inside quotation marks.

Syntax:

<q> Your Content goes here </q>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML quotations</title>
  </head>

  <body>
    <h3> HTML q element</h3>
    <p>See an example of using q quotation. </p>

     <h4>
    	without using the q element
    </h4>
    <p>
      The  element is used to put text inside quotation marks.
    </p>
    
     <h4>
    	with using the q element
    </h4>
    <p>
      <q>The  element is used to put text inside quotation marks.</q>
    </p>
  </body>
</html> 

Output:


You may be interested in the following topics:

Leave a Reply

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

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial