Home / HTML / Quotations

HTML Quotations

What are HTML Quotation Elements?

HTML provides special elements for marking up quotations, citations, abbreviations, and other text that needs special formatting. These elements help provide semantic meaning to your content and improve accessibility.

Block Quotations

The <blockquote> element is used for long quotations that are displayed as a separate block. It typically indents the quoted text:

Example
<blockquote cite="https://example.com">
    This is a block quotation. It is used for longer quotes
    that need to be displayed as a separate block element.
    The cite attribute can be used to reference the source.
</blockquote>

Inline Quotations

The <q> element is used for short inline quotations. Browsers typically add quotation marks around the text:

Example
<p>As Albert Einstein once said: <q cite="https://example.com">Imagination is more important than knowledge.</q></p>

Citations

The <cite> element is used to mark the title of a work, such as a book, movie, song, or article. It is typically rendered in italics:

Example
<p>One of my favorite books is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<p>I watched <cite>The Matrix</cite> last night.</p>

Abbreviations

The <abbr> element is used to mark abbreviations or acronyms. The title attribute provides the full expansion, which appears as a tooltip when hovering:

Example
<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language.</p>
<p>I work at <abbr title="National Aeronautics and Space Administration">NASA</abbr>.</p>

Address

The <address> element is used to provide contact information. It is typically rendered in italics:

Example
<address>
    Written by John Doe.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

Bidirectional Override

The <bdo> element is used to override the current text direction. It's useful for languages that are written right-to-left:

Example
<p>This text goes left to right (normal).</p>
<p><bdo dir="rtl">This text goes right to left.</bdo></p>
<p><bdo dir="ltr">This text goes left to right.</bdo></p>

Complete Example

Example
<p>As the famous author once wrote:</p>
<blockquote cite="https://example.com/quote">
    <p>The journey of a thousand miles begins with a single step.</p>
    <p>— <cite>Lao Tzu</cite></p>
</blockquote>

<p>I learned about <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> in my web development course.</p>

<address>
    Contact the author:<br>
    <a href="mailto:author@example.com">author@example.com</a>
</address>

Quotation Element Reference

Tag Description
<blockquote> Block quotation (long quotes)
<q> Inline quotation (short quotes)
<cite> Citation (title of work)
<abbr> Abbreviation or acronym
<address> Contact information
<bdo> Bidirectional override

Best Practices

← HTML Formatting HTML Comments →