CodesBeautify

HTML Blockquote Generator

Generate a blockquote with a proper attribution line and a cite URL that validates.

HTMLfigure markup
<figure>
  <blockquote>
    <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
  </blockquote>
  <figcaption>Arthur C. Clarke, <cite>Profiles of the Future</cite></figcaption>
</figure>
Runs locally in your browser

About the HTML Blockquote Generator

A pull quote looks simple and is easy to mark up wrongly. The specification says <blockquote> may contain only the quoted material, so the name of the person you are quoting does not belong inside it. This generator offers the two patterns that satisfy that rule: a <figure> wrapping the quote with the attribution in a <figcaption>, or a <footer> placed inside the quote, which the HTML standard explicitly permits.

The cite attribute takes the URL the passage came from. Browsers do not display it, but it travels with the markup and validators and scrapers can read it, so fill it in when you have a source page. The title of the work goes in a <cite> element, which is for the name of a book, film or article, never for the person who wrote it. Browsers italicise <cite> by default.

Your text is escaped, so quotation marks, ampersands and angle brackets in the passage cannot break the surrounding markup. Keep the quote to what was actually said and use square brackets for any word you add. If the quotation is a short phrase inside a sentence rather than a standalone passage, the HTML Citation Generator builds the inline <q> form instead.

How to use

  1. Paste the passage you are quoting.
  2. Add the author, the title of the work and the source URL.
  3. Choose figure or footer markup.
  4. Copy the block into your article.

Common questions

Can the author name go inside the blockquote?
Only inside a footer element. Loose text naming the speaker directly in the blockquote is invalid, because the element is meant to hold the quotation alone.
Does the cite attribute show on the page?
No browser renders it. It is machine readable metadata, so add a visible link as well if readers should be able to follow it.
What goes in the cite element?
The title of the work being quoted, such as a book or article name. The author goes outside it as plain text.
How do I remove the default indent?
Browsers add margin on blockquote. Set margin and padding to your own values in CSS, and add a left border if you want a visual rule.