HTML Quotations

HTML Quotation and Citation Elements

HTML provides specific elements to semantically mark up quotations, abbreviations, addresses, and citations.

Using these elements correctly improves document structure, accessibility, and can provide useful information to browsers and search engines.

Short Quotations: The Element

The <q> element is used for short, inline quotations that don’t require a paragraph break.

Browsers typically render the content of a <q> element surrounded by quotation marks. You should not manually add quotation marks around the text inside <q>.

Example:

<p>As the famous saying goes, <q>Be the change you wish to see in the world.</q></p>

The optional cite attribute can be used to provide a URL pointing to the source of the quotation (though this is not typically displayed by browsers).

<p>According to the documentation, <q cite="https://example.com/doc#section1">The function returns a promise.</q></p>

Block Quotations: The

Element

The <blockquote> element is used for longer quotations that usually span multiple lines or require a separate block.

Browsers typically render <blockquote> elements with indentation on both sides. Styling should be controlled via CSS.

Example:

<p>The W3C website states:</p>
<blockquote cite="https://www.w3.org/standards/">
  <p>W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device.</p>
</blockquote>

The cite attribute should contain a URL pointing to the source document or message for the quotation.

Abbreviations: The Element

The <abbr> element defines an abbreviation or acronym.

Use the title attribute to provide the full expansion of the abbreviation or acronym. This is important for accessibility and clarity, as browsers often display the title text as a tooltip on hover.

Example:

<p>We use <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> to build web pages.</p>

<p>The <abbr title="World Health Organization">WHO</abbr> provides global health guidelines.</p>

Note: The <acronym> tag is obsolete in HTML5; use <abbr> for both abbreviations and acronyms.

Contact Information: The

Element

The <address> element defines contact information for the author or owner of a document or an article. It should not be used for arbitrary postal addresses.

The contact information can include names, email addresses, URLs, physical addresses, phone numbers, etc., related to the document’s context.

Browsers typically render <address> text in italics and add line breaks before and after. Use CSS for custom styling.

Example within an article footer:

<footer>
  <address>
    Written by Jane Doe.<br>
    Contact: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a><br>
    Visit us at:<br>
    Example Inc.<br>
    123 Web St, Internet City
  </address>
</footer>

Work Titles: The Element

The <cite> element defines the title of a creative work (e.g., a book, paper, essay, poem, score, song, script, film, TV show, game, sculpture, painting, musical, exhibition, etc.).

It should not be used for citing people’s names.

Browsers usually render <cite> elements in italics.

Example:

<p>My favorite book is <cite>The Hitchhiker's Guide to the Galaxy</cite> by Douglas Adams.</p>
<p>The painting <cite>The Starry Night</cite> by Van Gogh is iconic.</p>

Bi-Directional Override: The Element

The <bdo> element overrides the current text directionality. It’s used in specific cases, often involving languages written right-to-left (like Arabic or Hebrew) mixed with left-to-right text.

The dir attribute is required and specifies the direction: ltr (left-to-right) or rtl (right-to-left).

Example:

<!-- Forcing right-to-left rendering -->
<p>This text is LTR. <bdo dir="rtl">This text will render RTL.</bdo></p>

<!-- Example with Arabic -->
<p>English: <bdo dir="rtl">مرحبا</bdo></p>

Use <bdo> only when the bidirectional algorithm’s default behavior needs explicit correction.

Summary: Quotation and Citation Elements

Tag	Description
<q>	Defines a short inline quotation (adds quotes).
<blockquote>	Defines a longer block quotation (indented).
<abbr>	Defines an abbreviation or acronym (use title for expansion).
<address>	Defines contact information for the document/article author/owner.
<cite>	Defines the title of a creative work.
<bdo>	Overrides the text directionality (requires dir attribute).