Quotations in HTML

Quotations in HTML

Quotations in html:-

An html quotation is the repetition of a sentence, phrase, or passage from speech or text that someone has said or written.

We will learn about the following elements in this Chapter-

  1. <blockquote> for html Quotations.
  2. <q> for Short html Quotations.
  3. <abbr> for Abbreviations.
  4. <address> for Contact Information.
  5. <cite> for Work Title.
  6. <bdo> for Bi-Directional Override.

1. <blockquote> for html Quotations:-

Any content within the <blockquote> element refers to a section that is quoted from another source that someone has said or written. Content within the <blockquote> element is usually indented from the left and right sides of the surrounding text.

“Cite” attribute should use in opening tags of <blockquote> element because the “cite” attribute tells about the source which quote has been taken 

Example:-

<blockquote cite=”APJ Abdul Kalam> A dream is not that which you see while sleeping, it is something that does not let you sleep. </blockquote>

Result:-

blockquote example result


2. <q> for Short Quotations:-

Any content within the <q>…</q> element is used to defines a short quotation and add double quotation marks within a sentence.

Example:-

<q> A dream is not that which you see while sleeping, it is something that does not let you sleep. </q>

Result see below:-

quotation elements example result


3. <abbr> for Abbreviations:-

You can abbreviate any text with <abbr> elements. And use the global “title” attribute to show the description for the abbreviation when mouse pointer over the element.

Example:  <p>The <abbr title=”Hypertext Markup Language>HTML</abbr> is a markup language.<p>

Result: The HTML is a markup language.


4. <address> for Contact Information:-

Any Content within the <address>…</address> element is used to defines the contact information for the author/owner of a document or an article. The Address can be an email address, URL, physical address, phone number, social media handle, etc.

 The web browser usually renders in italic, and will always add a line break before and after the text within the <address> element.

Example:-

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ipsum ratione suscipit natus debitis quasi beatae! Odit velit, esse consectetur obcaecati aspernatur optio omnis natus, mollitia quisquam veritatis pariatur dolorum eius. Praesentium eaque dolorum alias officiis porro fuga obcaecati recusandae mollitia quisquam ratione repellat, eius eveniet voluptas sapiente. Illo, iusto.</p>

<address> 205A, Road No 62, Jubilee Hills – Hyderabad, Andra Pradesh, India </address>

See Result Below:-

Address tag Example result


5. <cite> for Work Title:-

Any text within the <cite>….</cite> element defines the title of a creative work for example a book, a poem, a song, a movie, a painting, a sculpture, etc.

Note: The name of any person is not the title of a work.

the web browser usually renders in italic text within the <cite> html element. 

Example:- <p><cite>Wings of Fire: An Autobiography</cite> written by Dr. A. P. J. Abdul Kalam in 1998</p>

See the Result below:-

Cite element Example result


6. <bdo> for Bi-Directional Override:-

BDO stands for Bi-Directional Override. Any content within the <bdo>…</bdo> element is used to override the current text direction. You can set the text direction of your content either left or right.

<bdo> element has dir attribute. It’s value named ltr and “rtl”. hereltr” means left direction and rtl” means right direction.

Example:-    <bdo dir=”rtl” This paragraph will be written from right side to left. </bdo>

Result:-     This paragraph will be written from right side to left of page.


These elements are supported by the following web browsers:-

Google_Chrome_icon_200x200

Chrome

firefox-logo 200x200

Firefox

microsofte adge logo 200x200

Edge 

safari browser icon 200x200

Safari

Opera icon 200x200

Opera

YesYesYesYesYes