HTML Quotations

HTML Quotations: Marking Up Quotes, Sources, and Abbreviations

HTML provides dedicated quotation elements to mark up external quotes, title citations, abbreviations, and author contact details. Using semantic quotation tags preserves source attribution and helps assistive technologies announce quoted material accurately.

Block Quotes vs. Inline Quotes

Use blockquote for multi-line quotes taken from another source. Browsers automatically indent a blockquote as a standalone block, and you can include a cite attribute pointing to the original URL.

Use q for short inline quotations inside an existing sentence. Browsers automatically wrap q text in language-appropriate quotation marks.

Complete Quotation & Citation Example

Here is how blockquote, q, cite, abbr, and address work together in an article:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Quotations Example</title>
</head>
<body>
    <blockquote cite="https://www.w3.org/WAI/">
        <p>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.</p>
    </blockquote>
    <p>Quote by Tim Berners-Lee in <cite>W3C Web Accessibility Initiative</cite>.</p>

    <p>Our team follows the <abbr title="HyperText Markup Language">HTML</abbr> standard and says,
       <q>Keep semantic structure simple.</q>
    </p>

    <address>
        Written by Editorial Team<br>
        Contact: <a href="mailto:[email protected]">[email protected]</a>
    </address>
</body>
</html>

Remember that cite as an HTML element represents the title of a creative work—like a book, paper, or specification—not a person's name. Meanwhile, address holds contact information for the nearest article or page author, not arbitrary street addresses.

Common Mistakes to Avoid

• Adding manual quotes around a q element: Because browsers insert quotation marks automatically, wrapping quotes around a q element creates double quote marks.
• Using blockquote just to indent text: Indentation belongs in CSS margin-left, not inside a blockquote element.
• Wrapping a person's name in cite: Only wrap the title of a work inside cite, leaving the author's name in plain text.

Frequently Asked Questions

Does the blockquote cite attribute display on the page?

No. Browsers do not show the cite URL visually, so include a visible link or cite element when readers need the source link.

How does the abbr tag help visitors?

Providing a full expansion in the title attribute lets mouse users inspect the meaning of an acronym on hover.