Topic 55 of 57 11. HTML Miscellaneous Topics Interactive Tutorial

HTML Quotations: Q, BLOCKQUOTE, and CITE Tags Explained

11 mins read Last updated: 12 Nov 2026 15,200 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you mark up short quotes, block quotations, and source citations using <q>, <blockquote>, and <cite>?

Direct Answer & Overview

HTML provides three specialized semantic tags for quotations and citations: for short, inline quotations (which browsers automatically wrap in quotation marks),

for extended block quotations (rendered with indented margins), and to denote the title of a cited work (book, paper, song, movie).

Comprehensive Step-by-Step Concepts

1) The Inline Quote Tag (): - Used for brief quotes that flow within a paragraph sentence. - Browsers automatically supply opening and closing quotation marks based on the document's language (). - Never manually type quotation marks inside a tag, as doing so results in awkward double quotation marks (""Quote""). 2) The Block Quotation Tag (

): - Used for long quotations that span multiple lines or paragraphs. - Rendered as a block element with default left and right margins (indentation). - Supports the 'cite' attribute to store the source URL of the quotation (e.g.
). 3) The Citation Tag (): - According to HTML5 specifications, MUST represent the title of a creative work (such as a book title, academic research paper, film, speech, or song). - It must NOT be used for an author's personal name. - Browsers render in italics by default. 4) The 'cite' Attribute vs the Tag: - The 'cite' attribute on
or stores an invisible machine-readable URL. - The tag is a visible inline element holding the title of the work. 5) Styling Quotes with CSS: Modern designs customize
with large decorative quotation mark icons, border-left accent bars, and elegant serif typography.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Quotations Showcase</title>
    <style>
        blockquote { border-left: 4px solid #2563eb; margin: 20px 0; padding: 10px 20px; background: #f8fafc; font-style: italic; }
        blockquote p { margin: 0 0 8px; }
        figcaption { font-size: 0.9rem; color: #64748b; font-style: normal; }
    </style>
</head>
<body>
    <h2>Quotations and Citations</h2>

    <!-- 1. Inline Quotation (<q>) -->
    <p>
        Albert Einstein famously stated: 
        <q>Imagination is more important than knowledge.</q>
    </p>

    <!-- 2. Blockquote with Figure and Cite -->
    <figure>
        <blockquote cite="https://www.w3.org/Consortium/mission">
            <p>The social value of the Web is that it enables human communication, commerce, and opportunities to share knowledge.</p>
        </blockquote>
        <figcaption>
            &mdash; Tim Berners-Lee, in <cite>Weaving the Web</cite>
        </figcaption>
    </figure>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Use for inline quotes without typing quotation marks,

for multi-line quotes, and strictly for titles of works.

Common Technical & Interview Questions

Q1: Why should you avoid manually typing quotation marks around text inside a tag?

A1: Browsers automatically generate quotation marks for elements based on the document's language and cultural typographic conventions. Adding manual quotes produces duplicate quotes (e.g. ""Hello"").

Q2: Can the tag be used to wrap a person's name in HTML5?

A2: No. In HTML5 specifications, is strictly reserved for the title of a work (book, film, article, software). To wrap an author's name, use a or

Q3: Is the 'cite' attribute on a
tag clickable by users?

A3: No. The cite="URL" attribute is metadata intended for search engines and scrapers. To provide a user-clickable link, include an anchor tag () inside the citation.

All HTML Topics

Previous TopicMathML in HTML: Syntax, Elements, and Examples

Next TopicHTML Non-Breaking Space (NBSP): Uses, Syntax, and Examples