Quotations and citations

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~2 min

Level

advanced

This lesson

This lesson teaches Quotations and citations—the ideas, syntax, and habits you need before moving on in HTML.

Without a solid grasp of Quotations and citations, you will repeat mistakes in HTML exercises and on real pages or scripts.

You will apply Quotations and citations in contexts like: Websites, hybrid apps, email templates, design systems, and CMS-driven content.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs. Also use the HTML reference desk when you need tag or attribute lookup.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

Quotations come in two shapes: long excerpts that behave as blocks, and short phrases inside sentences.

Block quotations

<blockquote> wraps multi-paragraph quotes. Optional cite attribute holds a URL pointing at the source document—not visible text by itself.

<blockquote cite="https://example.com/article">
  <p>First paragraph of quoted material.</p>
  <p>Second paragraph continues the excerpt.</p>
</blockquote>

Rendered output

First paragraph of quoted material.

Second paragraph continues the excerpt.

cite URL omitted in this visual—add it in real markup when you have a canonical source.

Inline quotations

<q> carries short quotes inside a paragraph. User agents may insert language-appropriate quotation marks automatically.

<p>As the spec says: <q>authors must not use quoting punctuation</q> inside the element.</p>

Rendered output

As the spec says: authors must not use quoting punctuation inside the element.

Citing titles

<cite> marks the title of a referenced work (book, essay, film). Pair with visible attribution text nearby so readers know who spoke.

Attribution patterns

Provide human-readable source lines (— Author Name) even when machine-readable URLs exist.
For academic precision, follow your style guide (APA, MLA, Chicago) outside HTML semantics.

Avoid

Using blockquote solely for indentation.
Stuffing huge essays inside q—switch to blockquote with paragraphs.

Underused nuances

cite accepts a URL, but accessibility still expects visible attribution—automated quotes are not summaries.
Pull quotes duplicated from main text confuse screen reader users unless marked as repetition or purely decorative visually.

Citations and AI snippets

Copy/paste-heavy pages benefit from coherent quotation markup—not because search tricks, but because reader mode + syndication faithfully preserve citations.

Important interview questions and answers

Q: When should you use `strong` vs `b`?
A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics.
Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
A: It blocks the opened page from controlling the opener via `window.opener`, improving security.
Q: Why avoid fake buttons built with ``?
A: Anchors are for navigation; actions should use `

Tip: Use blockquote for long quotes; q for inline citations.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What confused you about this lesson?
How would you explain this to a teammate in 30 seconds?