HTML provides several tags for marking up quoted text, abbreviations, addresses, and citations. Using these correctly improves both semantics and accessibility.
The <blockquote> element is used for a long quotation from an external source. Browsers usually render it with an indent. The cite attribute specifies the source URL:
<blockquote cite="https://www.example.com/source">
For 50 years, WWF has been protecting the future of nature.
The leading conservation organization in the world,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>Browser output:
For 50 years, WWF has been protecting the future of nature. The leading conservation organization in the world, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
The <q> tag is used for short inline quotations. Browsers automatically add quotation marks around the content:
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>Browser output:
WWF's goal is to: Build a future where people live in harmony with nature.
The <abbr> tag defines an abbreviation or acronym. The title attribute holds the full expanded form, shown as a tooltip on hover:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard language for web pages.</p>
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>Browser output (hover to see tooltip):
HTML is the standard language for web pages.
WHO was founded in 1948.
<abbr> with the title attribute. It helps screen readers, search engines, and browsers understand abbreviations properly.
The <address> tag defines contact information for the author or owner of a document. Browsers usually display it in italic:
<address>
Written by John Doe.<br>
Visit us at:<br>
123 Main Street, New York<br>
USA
</address>Browser output:
The <cite> tag defines the title of a creative work (book, poem, song, film, painting, etc.). Browsers usually render it in italic:
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<p>My favorite book is <cite>The Alchemist</cite> by Paulo Coelho.</p>Browser output:
The Scream by Edvard Munch. Painted in 1893.
My favorite book is The Alchemist by Paulo Coelho.
The <bdo> tag overrides the text direction. The dir attribute can be set to rtl (right-to-left) or ltr (left-to-right):
<p><bdo dir="rtl">This text will be written right to left.</bdo></p>
<p><bdo dir="ltr">This text goes left to right (default).</bdo></p>Browser output:
This text will be written right to left.
This text goes left to right (default).
| Tag | Description |
|---|---|
<blockquote> | Long block quotation from an external source |
<q> | Short inline quotation — adds quote marks automatically |
<abbr> | Abbreviation or acronym — use with title attribute |
<address> | Contact information for author or owner |
<cite> | Title of a creative work (book, film, painting, etc.) |
<bdo> | Overrides text direction (rtl / ltr) |