HTML Quotation & Citation Elements: `<q>`, `<blockquote>`, `<cite>`

Learn to use HTML's semantic elements for quotations (`<blockquote>`, `<q>`), citations (`<cite>`), abbreviations (`<abbr>`), contact information (`<address>`), and bi-directional text (`<bdo>`). Improve your website's structure and accessibility with this comprehensive guide!

HTML Quotation and Citation Elements

This chapter explores HTML elements designed to present quotations, citations, abbreviations, and other textual information in a structured and semantically meaningful way.

`<blockquote>` — Long Quotations

The <blockquote> element is used to quote a large block of text from another source. Browsers typically indent blockquotes.

<blockquote>
  For 60 years, WWF has worked to help people and nature thrive. ...
</blockquote>

(The output would show the provided WWF quote indented.)

`<q>` — Short Quotations

The <q> element indicates a short, inline quotation. Browsers usually add quotation marks around the text.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

(Output would show the quote with quotation marks.)

`<abbr>` — Abbreviations and Acronyms

The <abbr> element marks abbreviations or acronyms (like "HTML," "CSS," "WHO"). Use the title attribute to provide a full description (appears as a tooltip on hover).

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

(Output would show "WHO" with a tooltip on hover.)

`<cite>` — Citations

The <cite> element cites the title of a creative work (book, song, etc.). The text is usually italicized, and browsers may add a line break before and after.

<p>I just read <cite>The Great Gatsby</cite>.</p>

(Output would show "The Great Gatsby" in italics.)

`<address>` — Contact Information

The <address> element provides contact details for the document's author or owner (email, URL, etc.). The text is typically italicized, and a line break is added before and after.

<address>Written by John Doe. Contact at: example@email.com</address>

(Output would show the contact information in italics with surrounding line breaks.)

`<bdo>` — Bi-directional Override

The <bdo> element (Bi-Directional Override) forces text direction (left-to-right or right-to-left), overriding the default text direction for the browser.

<bdo dir="rtl">This text will be right-to-left.</bdo>

(Output would display the text from right to left.)

Summary Table