HTML blockquote generator with attribution, cite and figcaption

How to use the blockquote generator

1. Paste the text into Quote (blank line between paragraphs).
2. Enter the Author and the Source title, such as a book, article or speech.
3. Add the Source URL (cite) if the quotation is online.
4. Keep Wrap in <figure> with a caption ticked, or untick it for a simple paragraph after the quote.
5. Copy the code and check the Preview.

What it does and when to use it

Pull quotes, customer quotations, passages from books and citations in articles all deserve proper markup. blockquote tells browsers and screen readers that the text is quoted from somewhere else, and screen readers can announce where the quotation begins and ends. Getting the attribution right is the part people usually get wrong: the name should not sit inside the blockquote, because then it reads as part of the quotation.

This generator puts the quote, the source link and the attribution in their correct places. Use the figure version for anything prominent. The plain version suits simple blog posts where a styled figure is not wanted.

To give an image a caption the same way, use the HTML Figure & Caption Generator. If the quotation contains characters such as curly quotes or dashes that you want as entities, look them up with the HTML Character Entity Finder. For a definition-style list of sayings and their authors, the HTML Definition List Generator may fit better.

How it works

The quote is split at blank lines, and each part becomes a p inside the blockquote. Single line breaks inside a part become <br>, which keeps the lines of a poem or lyric excerpt. The URL goes in cite only when you enter one. The attribution starts with an em dash, then the author, then <cite> with the source title, separated by a comma; any part you leave empty is skipped. With the figure option, the blockquote is indented inside figure and the attribution goes into figcaption. All text is escaped. It runs in your browser.

Worked examples

The default quotation, with author, source title and URL:

<figure>
  <blockquote cite="https://www.cs.utexas.edu/~EWD/transcriptions/EWD04xx/EWD498.html">
    <p>Simplicity is prerequisite for reliability.</p>
  </blockquote>
  <figcaption>— Edsger W. Dijkstra, <cite>How do we tell truths that might hurt?</cite></figcaption>
</figure>

Plain version. Untick the figure option and clear the URL and source title:

<blockquote>
  <p>Simplicity is prerequisite for reliability.</p>
</blockquote>
<p>— Edsger W. Dijkstra</p>

Two paragraphs and a report as the source. A first paragraph, a blank line, then two lines, with no author. The second paragraph becomes <p>Second line one<br>Second line two</p>, and the caption is — <cite>Annual report 2025</cite>.

Limits and tips

• Quote accurately and keep the source link, especially for material under copyright, where only short quotations are usually acceptable.
• Styling such as a left border or large quotation marks belongs in CSS; the preview shows a simple green border.