HTML Blockquote

January 16, 2022August 6, 2022
by root

HTML Blockquote

The HTML <blockquote> tag defines a long quotations. When you write the text inside the <blockquote> tag, the alignment of this text would be change than other text and look like special note or text. Quotation is used for many reasons, here we describe one example for this tag, a short piece of a longer text to elaborate the meaning of the chapter.

Syntax:

<!DOCTYPE html>
<html>
<head>

<title>Page Title</title>

</head>
<body>


<blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</blockquote>

</body>
</html>

Short Quotations <q>

It defines short quotation text such as in middle of a paragraph.

Source:

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
<q>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</q>, 

when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

Output:

Abbreviations tag <abbr>

When you write a paragraph and middle of it you write short form of any long word then you can use <abbr> tag to show full form while doing mouse hover over that short form word.

Source:

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

<abbr title="It's only demo text"> 
Lorem Ipsum 
</abbr> 

has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>

Output:

Contact Information <address>

When you write the address of a person or an organization, <address> tag would be used. Automatically, browser shows it in italic and add <br> tag called line break.

Email address, phone number, social media such as LinkedIn, Instagram, twitter, etc. are included in the contact information.

Syntax:

     <address>
         Organization Name: XYZ <br>
         Contact us: <br>
         XYZ<br>
         999-A, XYZ, XYZ - 0000 <br>
         xyz.email.com <br>
     </address>

Output:

Work Title <cite>

The <cite> tag defines the title of a creative work (e.g. a book name, a poem title, a song title, a movie title, a painting name, etc.). Browser automatically renders it in italic.

Note: Person name is not a title, so don’t use <cite> tag for person name.

Syntax:

<p>
I am paragraph text and the title of this paragraph is 

<cite> 
Quotations 
</cite>. 

Can you see the difference 
</p>

Output:

Bi-Directional Override <bdo>

This tag is used to change the text direction. By-default, text renders left to right as you are reading this description left hand side to right hand side. This tag would be used with it’s attribute “dir”. “dir” renders direction, so if you want to change the direction of text, use this tag.

Without dir attribute, the <bdo> works automatically on any direction.

Right hand side to laft hand side

Syntax:

<p>
I am paragraph text and It's your 

<bdo dir="rtl">
RIGHT HAND SIDE TO LEFT HAND SIDE TEXT 
</bdo>. 

Can you see the difference 
</p>

Output:

Left hand side to right hand side

Syntax:

<p>
I am paragraph text and It's your 

<bdo dir="ltr">
RIGHT HAND SIDE TO LEFT HAND SIDE TEXT 
</bdo>. 

Can you see the difference 
</p>