HTML
📌 HTML Quotations (HTML Quotes and Related Tags)
Overview
HTML provides special tags for displaying quotations, abbreviations, directional text, and contact information correctly on web pages. These tags ensure that the content is presented both visually and semantically in the proper way.
The main tags used are:
<blockquote>, <q>, <abbr>, <address>, <cite>, <bdo>Quotation and Related Elements
| Tag | Meaning / Usage | Browser Behavior / Notes | Example & Explanation |
|---|---|---|---|
<blockquote> |
Long text quotations | Usually displayed as an indented block. The <cite> attribute can be used to specify the source. |
html<blockquote cite="http://www.worldwildlife.org/who/index.html"> ... quoted text ... </blockquote> Used to display long quotations as separate paragraphs. |
<q> |
Short or inline quotations | Browsers usually add quotation marks automatically. | html<p WWF's goal is to:<qBuild a future where people live in harmony with nature.</q> <p> The quoted text appears inline within a sentence. |
<abbr> |
Abbreviations and acronyms | The title attribute provides the full text, which is displayed when hovering over the abbreviation. | html<p The <abbr title="World Health Organization">WHO</q> </abbr> was founded in 1948. </p> The abbreviation “WHO” is highlighted, and its full form is shown on hover. |
<address> |
Author or document contact information | Usually displayed in italic style; as a block element, browsers automatically add line breaks before and after. | html<address> Written by John Doe.<br>Visit us at : <br> Example.com <br> Box 564, Disneyland <br> USA </address> Used to display author or contact information. |
<cite> |
Is used to define the title of a creative work. | Defines the title of a creative work (such as a book, movie, painting, or song). | html<p><cite>The Scream <cite>by Edvard Munch. Painted in 1893.</p>Highlights the title of a creative work such as a painting or book. |
<bdo> |
Text direction override (Bi-Directional Override) | Controls the text direction using the dir attribute (rtl = right-to-left, ltr = left-to-right). | html<bdo dir="rtl">This text will be written from right to left </bdo>Forces the text to display from right to left. |
Usage Examples and Notes
Long Quotation – <blockquote>
Used to display long paragraphs as indented blocks.
Short Quotation – <q>
Used for short inline quotes; quotation marks are automatically added by the browser.
Abbreviations – <abbr>
Displays the full form of an abbreviation using the title attribute when hovering over it.
AContact Information – <address>
Used to display author or organizational contact information in italic and block format.
Creative Work Titles – <cite>
Used to mark the title of books, paintings, or other creative works; not for personal names.
Text Direction – <bdo>
Used to change the writing direction of text, for example, from right-to-left or left-to-right.
Quick Summary
-
<blockquote>Long quotations -
<q>Short or inline quotations -
<abbr>Abbreviations and acronyms -
<address>Author or contact information -
<cite>Titles of creative works -
<bdo>Change text direction