HTML Quotations

Last Updated : 05 Apr, 2025

HTML quotation elements are used to display quoted text on a web page, differentiating it from regular content. These elements help structure citations and quotations effectively within the document.

Tag	Description
`<abbr>`	Represents an abbreviation or acronym, typically with a title attribute to explain its full form.
`<address>`	Specifies contact information for the author or owner of the document, such as an email or address.
`<bdo>`	Defines the text direction, either left-to-right (LTR) or right-to-left (RTL), using the dir attribute.
`<blockquote>`	Marks a block of text that is a quotation from another source, often indented for emphasis.
`<cite>`	Refers to the title of a work, such as a book, article, or published document.
`<q>`	Used to define a short inline quotation, usually enclosed in quotation marks.

HTML Quotations Examples

Example 1: Using <bdo>, <abbr>, and <address> Tags

This example demonstrates how to use the <bdo> tag to change text direction, the <abbr> tag to define an abbreviation, and the <address> tag to display contact information.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<!--Driver Code Ends-->

<body>
    <!-- Inside <bdo> tag -->
    <p>
        <bdo dir="rtl">The quick brown fox jumps over the lazy dog</bdo>
    </p>
    <p>
        Welcome to
        <abbr title="GeeksforGeeks">GfG</abbr>
    </p>
    <address>
        <p>
            Address:<br />
            710-B, Advant Navis Business
            Park,<br />
            Sector-142, Noida Uttar Pradesh – 201305
        </p>
    </address>

<!--Driver Code Starts-->
</body>
</html>

<!--Driver Code Ends-->

In this code:

The <bdo dir="rtl"> tag reverses the text direction to right-to-left.
The <abbr title="GeeksforGeeks"> tag defines an abbreviation with a full explanation on hover.
The <address> tag displays contact details in a structured manner.

Example 2: Using <blockquote>, <q>, and <cite> Tags

This example showcases how to use the <blockquote> tag for block-level quotes, the <q> tag for inline quotes, and the <cite> tag to reference the source of a quote.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<!--Driver Code Ends-->

<body>
    <!-- Inside blockquotes -->
    <blockquote>
        <p>The quick brown fox jumps over the lazy dog</p>
    </blockquote>
    <!-- Inside quotes -->
    <q>The quick brown fox jumps over the lazy dog</q>
    <!-- Cite with title -->
    <p>
        The <cite>GeeksforGeeks</cite> is the best site to<br>
        search for articles and practice problems.
    </p>
</body>

<!--Driver Code Starts-->
</html>

<!--Driver Code Ends-->

In this code:

The <blockquote> tag wraps a long quoted passage, typically used for block-level quotations.
The <q> tag wraps a short, inline quote, automatically adding quotation marks.
The <cite> tag is used to reference the source or title of the work being quoted.

Use Cases

HTML quotation elements play a crucial role in presenting quoted text, references, and citations effectively on a webpage.

Displaying Block Quotes: Use <blockquote> to present long quotations from external sources, clearly separating them from the rest of the content.
Inline Quoting: Use <q> for shorter quotes within text, preserving the flow of content while still indicating a citation.
Citing Sources: Use <cite> to reference the title of a work or publication, providing clarity and context to the quoted material.