HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from soopropathshala website:</p>
<blockquote cite="http://www.soopropathshala.com/index.html"> SOOPRO Pathshala provides various types of coding courses like: C, C++,JAVA, C#, ASP.NET, ASP.NET MVC, Python, Angular, React, Android, Asp.NET Core, PHP, MySql, SQL etc.. </blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.

Example:
<p>Soopro Pathshala: <q>Build a future for students in the field of computer.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

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

Example:
<address> Soopro Pathshala.
Visit us at:
soopropathshala.com
Satyendra Nagar, Road no 01
Bihar
</address>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example:
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

<bdo dir="rtl">This text will be written from right to left</bdo>

Here are the key points about HTML Quotation:

1. <q> Tag (Inline Quotes):

• Used for short, inline quotations.
• Automatically adds quotation marks around the text.
• Does not change the layout or line breaks

2. <blockquote> Tag (Block Quotes):

• Used for longer, block-level quotations.
• Typically indents the text to separate it from the surrounding content.
• Optionally includes the cite attribute to provide the source of the quote.

3. cite Attribute:

• Optional attribute for the <blockquote> tag to specify the source of the quote.
• Does not change how the content is displayed but provides additional information.

No Visual Change with cite:

• The cite attribute is not displayed visually, but can be useful for search engines, screen readers, and for referencing the source in the code.

Browser Rendering:

• Browsers automatically format <q> with quotation marks, and <blockquote> with indentation, although exact rendering can be adjusted with CSS.