CodesBeautify

HTML Quote Generator

Turn a quotation into correct blockquote or inline markup with attribution and an optional stylesheet.

Quotation HTMLAttributed blockquote
<figure class="quote">
  <blockquote>
    <p>The most damaging phrase in the language is: we have always done it this way.</p>
  </blockquote>
  <figcaption>Grace Hopper</figcaption>
</figure>
Runs locally in your browser

About the HTML Quote Generator

Quoting properly takes two elements. A block quotation belongs in blockquote, and a short run of quoted words inside a sentence belongs in q, which supplies the quotation marks itself. Both accept a cite attribute holding the URL the words came from. This builder writes either form, and for the block version it wraps the quotation in a figure with a figcaption, because attribution is not part of what was said and putting the author inside the blockquote misrepresents the quotation.

The cite element inside the caption names the work, a book, a talk or an article, not the person. That distinction trips up a lot of hand written markup: the author goes in plain text, the title of the source goes in the cite element. The optional stylesheet adds a left rule, larger italic type and a muted caption, which is enough to make a pull quote look deliberate without pulling in a framework.

Neither element is a ranking signal, but the structure helps readers scan a long article and helps translation tools keep the quotation intact instead of merging it with your own words. If you are quoting several passages on one page, generate each block here and then compress the finished document with the HTML Minifier before you deploy it.

How to use

  1. Paste the quotation and add the author and the title of the work.
  2. Choose block for a standalone passage or inline for quoted words inside a sentence.
  3. Add the source URL so the cite attribute records where it came from.
  4. Copy the markup, and take the stylesheet too if you need a starting look.

Common questions

Should the author go inside the blockquote?
No. Keep the words that were spoken inside the blockquote and put the attribution in a figcaption beside it.
What does the cite attribute do?
It records the URL the quotation came from. Browsers do not display it, but it travels with the markup for tools and archives.
Do I need to type quotation marks?
Not for the inline q element, which adds language aware marks itself. A blockquote is usually styled instead of marked.
Is a blockquote good for pull quotes?
Yes, when the text really is quoted. A repeated sentence from your own article is better marked up as an aside.