Skip to main content
WPFSharp Academy
Syllabus

HTML Quotations & Citations (blockquote, q, cite)

Badar KhalilUpdated September 27, 2026 2 min read
Share X Facebook LinkedIn WhatsApp

HTML Quotations & Citations (blockquote, q, cite)

HTML quotation elements allow you to properly mark up quoted content and citations, giving both readers and search engines clear semantic meaning about attributed text — essential for blogs, news sites, and academic content.

The <blockquote> Element

Use <blockquote> for longer, block-level quotations from another source. Browsers typically indent this content by default:

Code
<blockquote cite="https://example.com/source">
  The only way to do great work is to love what you do.
</blockquote>

The <q> Element (Inline Quotes)

Use <q> for short, inline quotations within a sentence. Browsers automatically add quotation marks around the content:

Code
<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

The <cite> Element

Use <cite> to reference the title of a creative work (book, article, movie, song) — not the person who said the quote:

Code
<p><cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>

Combining All Three

Code
<blockquote cite="https://example.com/mlk-speech">
  <p>I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin.</p>
  <footer>&mdash; Martin Luther King Jr., <cite>I Have a Dream</cite></footer>
</blockquote>

Why This Matters for SEO & Trust Signals

Properly attributed quotations using semantic markup help search engines identify original sourced content, which supports E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) signals — a major modern SEO ranking factor.

Common Mistakes

  • Using <blockquote> just for visual indentation instead of actual quoted content — use CSS margin instead.
  • Forgetting that <q> automatically adds quotation marks — don't add your own extra quote marks.
  • Using <cite> to credit a person's name instead of a work's title.

Key Takeaways

  • <blockquote> is for long, block-level quotations.
  • <q> is for short, inline quotations (auto-adds quote marks).
  • <cite> references the title of a work, not a person.
  • Use the cite attribute on <blockquote> to link the original source URL.
Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Exercise: Mark Up a Quote CorrectlyHTML

Use blockquote with a cite attribute, and add a footer crediting the author, for the quote: 'Stay hungry, stay foolish.' by Steve Jobs.

Try it Yourself HTML
Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?