Quotes and citations

When should I use blockquote?

Use blockquote for a quotation long enough to stand as its own block: a paragraph from a book, a passage from a speech, a customer review set apart from the surrounding text. Browsers indent it by default with a 40px margin on each side. That indent is only styling. The point of the element is that it tells browsers, screen readers and search engines the content came from somewhere else.

A blockquote can hold paragraphs, lists and other flow content. Put the text inside p elements rather than directly in the blockquote, so multi-paragraph quotes stay well structured and pick up your normal paragraph spacing.

<blockquote cite="https://example.com/essays/attention">
  <p>Attention is the rarest and purest form of generosity.</p>
</blockquote>

How do screen readers treat quotations?

Browsers expose blockquote with the role blockquote. NVDA and JAWS announce "block quote" when entering it and "out of block quote" when leaving, and both offer a single-key shortcut, Q, to jump between quotes. VoiceOver is quieter and often reads the content without any announcement.

The q element is exposed with a generic or quote role, and screen readers do not announce it. The quotation marks the browser generates through CSS are usually read as punctuation, depending on the user's verbosity settings. That is why the words around a quote, such as "the ranger told us", carry the attribution for listeners.

What does the cite attribute do?

The cite attribute on blockquote, q, ins and del holds a URL pointing to the source. Browsers do not display it and do not make it clickable. It is metadata for scripts, browser extensions and anyone reading the source.

Because readers never see it, it cannot be your only credit. If you want to credit the source, and for a quote you almost always do, write it as visible text next to the quote and add a normal link. Keep the cite attribute too if you like; it costs nothing and helps tools that collect quotations.

The attribute must be a valid URL. A book title or an author's name in cite="" is invalid and the validator will flag it.

How is q different from blockquote?

The q element is for short quotations that sit inside a sentence. The browser adds the quotation marks for you through CSS quotes, and it picks marks that suit the language set by lang: curly double quotes for English, guillemets for French, low-high quotes for German. Nested q elements get single quotes automatically.

Do not type your own quotation marks around a q, or readers see them doubled. If you copy the page as plain text, the generated marks are usually lost, which is one reason many writers use typed quote characters and skip q. Both are valid. Choose q when you want the semantics and the automatic marks; choose plain text when copy and paste fidelity matters more.

If the quote breaks out of the paragraph and stands alone, use blockquote.

<p>The ranger told us to <q>walk slowly and listen first</q>.</p>
<p lang="fr">Elle a dit <q>attendez ici</q>.</p>

What belongs inside the cite element?

The cite element marks the title of a creative work: a book, an article, a film, a song, a painting, a game, a podcast episode, a report, a website. Browsers italicise it by default, which matches the print convention for titles.

The HTML Living Standard says cite holds the title of the work, not the name of a person. Write <cite>Silent Spring</cite> by Rachel Carson, with the author's name as plain text. Older tutorials and some WordPress themes wrap commenters' names in cite; that use is no longer correct, though browsers will not complain.

A cite element is never required. Use it when the title is a reference to a work, in running text or in an attribution line.

<p>My favourite chapter of <cite>Silent Spring</cite> is the first one.</p>

How do I attribute a blockquote visibly?

HTML has no dedicated attribution element. The pattern the standard itself shows is a figure that wraps the blockquote, with the attribution in a figcaption. The caption is tied to the figure, so assistive technology can associate the two, and the attribution stays outside the quoted text.

Keep the author's name outside the blockquote. Anything inside the element is part of the quotation, so a credit line inside it claims the author said their own name.

For a testimonial on a bakery site, the same pattern works: the review in the blockquote, the customer's name and town in the figcaption. Avoid putting the name in a footer inside the quote; that was suggested in some HTML5 drafts and was later dropped.

<figure>
  <blockquote>
    <p>Best rye bread north of the river.</p>
  </blockquote>
  <figcaption>Priya S., Kirkstall, in
    <cite>Leeds Food Guide</cite></figcaption>
</figure>

How should I style quotes without breaking meaning?

Decorative quotation marks belong in CSS, usually with a ::before pseudo-element on the blockquote. Hide them from assistive technology by setting the content with alt text, for example content: "\201C" / "";, which modern browsers support. A large decorative quote glyph read out as "left double quotation mark" before every testimonial gets tiresome fast.

Pull quotes, the large repeated lines magazines put in the margin, are a special case. They repeat text already on the page, so a screen reader user hears it twice. Mark them up with aria-hidden="true" on a plain element, or use a blockquote only if the pulled text does not appear elsewhere.

Do not use blockquote to indent text that is not a quotation. Use a margin or padding in CSS for that.

blockquote::before {
  content: "\201C" / "";
  font-size: 3rem;
}

How do I check quotes, and what does AI get wrong?

Inspect the quote in DevTools and check the Accessibility pane for the blockquote role. Run the W3C Nu validator to catch an invalid cite URL. Then test with NVDA: press Q to jump between quotes and listen for where the attribution falls. It should come right after the quote leaves, not inside it.

AI-generated testimonial sections often put the customer's name in a cite element inside the blockquote, type quote marks around a q, or use blockquote purely for an indented callout box. Check also for invented quotations attributed to real people. A model can produce a plausible line from a famous author that the author never wrote, so verify every quote against its source before you publish it.

Field notes

• Use blockquote for a longer quote set as its own block.
• Use q for a short quote inside a sentence.
• The cite attribute holds a source URL that the browser does not show.
• The cite element marks the title of a work, such as a magazine or book.

Easy to get wrong

blockquote means quoted content from another source. Use CSS for indentation.

The browser already adds quotation marks to q, so typed marks appear twice.

cite marks the title of a work, not a person's name.

address is for contact details of the page or article author, not any address mentioned in text.

Questions people ask

Does the cite attribute show on the page?

No. Browsers keep it hidden. Write the source in visible text if readers should see it.

Should the author's name go inside the cite tag?

No. Use cite for the title of the work and leave the person's name as plain text.

Do I need to add quotation marks to the q element?

No. The browser inserts language-appropriate quote marks for you.

Can a blockquote contain multiple paragraphs?

Yes. Put each paragraph in its own p element inside the blockquote.