In the previous chapter we learnt about HTML text formatting. In this chapter we will learn about some other predefined text formatting elements. These elements are used in very special cases. Look at the below examples to understand properly.

Quotation


Example - 1


<p>Quote is taken from Jharkhandinfo website about Srawan Mela:</p>

<blockquote cite = "https://jharkhandinfo.co.in">

Babadham is a very important place of Jharkhand State.It hosts

the world’s longest period religious fair during Sawan Month.

Saawan is fifth month of Hindu calendar. Usually it gets in 

July –August Month of Christian Calendar and it continues for

whole lunar month of Saawan. Lakhs of the devotees throng the

Baba Baidyanath Temple to offer the holy water of Ganga.

</blockquote>

This will be displayed on webpage like:

Quote is taken from Jharkhandinfo website about Srawan Mela:
Babadham is a very important place of Jharkhand State.It hosts the world’s longest period religious fair during Sawan Month. Saawan is fifth month of Hindu calendar. Usually it gets in July –August Month of Christian Calendar and it continues for whole lunar month of Saawan. Lakhs of the devotees throng the Baba Baidyanath Temple to offer the holy water of Ganga.



In above example there is a quotation which was written in < blockquote > tags. < blockquote > tags add some extra margin to each line of paragraph.

The < blockquote > tags used to display the section of quotes that is taken from another source. <blockquote> element defines with an attribute called “cite”. “cite” attribute defines the source link from where the quote is taken.

HTML <cite> Element

In above example “cite” is used as an attribute but <cite> is also used as an element which describes the title of any kind of work. <cite> element renders the text like italic on the web page. Let’s focus on the below example.

Example - 2


<p><cite title = "Romantic Novel">Half Girlfriend</cite> by Chetan Bhagat was published on
 1<sup>st</sup> Oct. 2014</p>


This will be displayed on webpage like:

Half Girlfriend by Chetan Bhagat was published on 1st Oct. 2014





Short <q> for quotations

Short quotations can be defined on HMTL document with <q> element. Browsers renders the <q> element as quotations marks (“ ”) on the web page.

Example - 3


<p><strong>Progrramers Purpose:</strong><br />
<q>To <b>Help</b> and <b>Educate</b> those who want to learn Programming.</q>
</p>

This will be displayed on webpage like:

Progrramers Purpose:
To Help and Educate those who want to learn Programming.


HTML <abbr> for acronyms

Sometime we need to share extra information of content on a web page like abbreviations or acronym. With combination of <abbr> element and title attribute this can be done easily.

Example - 4


<p><abbr title = "Hongkong and Shanghai Banking Corporation">HSBC</abbr> is a 
British multinational banking and financial services company.</p>

This will be displayed on webpage like:

HSBC is a British multinational banking and financial services company.


HTML <address> for Contact information

HTML <address> element describes the contact information on web page. <address> element renders the text as italic word on web page.

Example - 5


<address>
Written by <b>Chandan Kumar Vishwakarma</b><br />
Website : https://progrramers.com<br />
Join FB Group: https://www.facebook.com/groups/progrramers/<br />
Dhanbad, Jharkhand<br />
India
</address>

This will be displayed on webpage like:

Written by Chandan Kumar Vishwakarma Website : https://progrramers.com Join FB Group: https://www.facebook.com/groups/progrramers/ Dhanbad, Jharkhand India


Some of the browsers add line break before and after the element automatically.


HTML <bdo> for Bi-Directional Override.

<bdo> element used to define the Bi-Directional override on web page. It can be used with “dir” attribute. <bdo> element’s default value is “ltr”. If you want to display the text right to left direction on web page and dir attribute value is “rtl”. See the below example.

Example - 6


<b>This will be displayed on webpage like:</b>

This will be displayed on webpage like:

This is an Example of Bi-Directional override.



HTML5 Tutorial - HTML Quotations

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

1 comments: