HTML provides semantic tags for displaying external citations, block quotes, inline quotes, abbreviations, and author contact metadata. Using proper quotation elements allows search engines and accessibility tools to attribute quotes and reference sources accurately.
HTML quotation tags distinguish between long block-level passages and inline quotes or citations.
flowchart TD
A["Quotation & Citation Tags"] --> B["Block-Level"]
A --> C["Inline-Level"]
B --> B1["blockquote: Long quotes (indented block)"]
C --> C1["q: Short inline quote (adds quote marks)"]
C --> C2["cite: Title of creative work (italic)"]
C --> C3["abbr: Abbreviation with tooltip title"]
C --> C4["address: Author contact information"]
<blockquote>: Defines a block section quoted from another source. Browsers indent <blockquote> elements by default.cite="..." (Attribute): Specifies the source URL of a <blockquote> or <q> element (not displayed visually, but used by search engines).<q>: Defines a short inline quote. Browsers automatically wrap text inside <q> with quotation marks ("...").<abbr>: Defines an abbreviation or acronym. Adding title="Full Term" displays a browser tooltip on hover.<cite>: Defines the title of a work (book, article, paper, website, or song). Rendered as italic by default.<address>: Defines contact information for the author or owner of a document/article. Rendered as italic with line breaks.<bdo>: Bi-directional override (<bdo dir="rtl">). Flips text reading direction from right-to-left or left-to-right.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Quotations Example</title>
</head>
<body>
<h2>Web Standards and Principles</h2>
<!-- Blockquote with cite URL attribute -->
<blockquote cite="https://www.w3.org/Consortium/">
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
</blockquote>
<!-- Citation title tag -->
<p>— Tim Berners-Lee, creator of the <abbr title="World Wide Web">WWW</abbr>, quoted in <cite>W3C Accessibility Guidelines</cite>.</p>
<!-- Inline quote tag (browser auto-injects quotes) -->
<p>As the documentation states, <q>semantic HTML improves search engine ranking and screen reader clarity.</q></p>
<!-- Author address section -->
<address>
Written by <a href="mailto:[email protected]">Engineering Content Team</a><br>
KoderSolution Developer Portal<br>
San Francisco, CA
</address>
</body>
</html>
<q> for quote marks inside <blockquote>: <blockquote> tags represent standalone paragraphs. You do not need to wrap text inside <blockquote> with <q> tags or manually typed quote marks.<cite> for titles, not author names: According to the W3C HTML standard, <cite> must contain the title of a work (e.g., <cite>Clean Code</cite>), not the name of a person.title attribute for <abbr> tags: Screen readers announce the expanded title attribute of <abbr> tags so users understand abbreviations like <abbr title="Application Programming Interface">API</abbr>.Create a blockquote (<blockquote>) with a cite URL attribute, attribute the author using an <abbr> tag for their title, and list the title of the book in a <cite> tag!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.