Learn HTML Quotation and Citation Elements: Blockquote, Q, Abbr, Cite, Address, BDO | HTML Tutorial

Learn HTML Quotation and Citation Elements: Blockquote, Q, Abbr, Cite, Address, BDO

Introduction

HTML provides several elements for adding quotations, citations, abbreviations, and more to your webpage. These tags help define the structure and meaning behind the text. Let’s explore some key elements like <blockquote>, <q>, <abbr>, <address>, <cite>, and <bdo>.

HTML <blockquote> for Long Quotations

The <blockquote> tag is for longer quotes, typically displayed with indentation. Here's an example of using it for a quote:

<blockquote cite="http://www.example.com">
This is a long quotation taken from another source.
</blockquote>

Output:

This is a long quotation taken from another source.

HTML <q> for Short Quotations

The <q> tag is used for inline quotations. Most browsers automatically wrap the text inside <q> with quotation marks. Here's an example:

<p>He said, <q>HTML is easy!</q></p>

Output:

He said, HTML is easy!

HTML <abbr> for Abbreviations

Use the <abbr> tag to define abbreviations or acronyms, like "HTML" or "CSS". By using the title attribute, you can provide more information on hover:

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

Output:

The WHO was founded in 1948.

HTML <address> for Contact Information

The <address> tag is for contact information. The content is typically rendered in italics. Here's how you use it:

<address>
Contact: John Doe, [email protected]<br>
123 Main St, Wonderland
</address>

Output:

Contact: John Doe, [email protected]
123 Main St, Wonderland

HTML <cite> for Citing Works

Use the <cite> tag to cite the title of a creative work, like books, movies, or songs. Example:

<p><cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>

Output:

The Great Gatsby by F. Scott Fitzgerald.

HTML <bdo> for Changing Text Direction

The <bdo> tag is used to override the text direction. For example, you can change text from left-to-right (LTR) to right-to-left (RTL) by setting the dir attribute:

<bdo dir="rtl">This text goes right to left.</bdo>

Output:

This text goes right to left.

Quick Reference for HTML Quotation and Citation Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Overrides the text direction
<blockquote>	Defines a section quoted from another source
<cite>	Defines the title of a creative work
<q>	Defines a short inline quotation

Previous Article:

Learn HTML Text Formatting: Bold, Italic, Subscript, Superscript, and More

Ashraf Learn Modern HTML