The blockquote tag wraps quoted text and tells browsers this is someone else's words

A blockquote is an HTML element that marks text as a quotation from another source. When you use the <blockquote> tag, you're telling the browser "this text came from somewhere else" — and the browser typically indents it to make that clear to readers.

The basic structure is simple: open with <blockquote>, put the quoted text inside, and close with </blockquote>. You can add a source attribution using the <cite> tag or a paragraph that credits where the quote came from.

Key Takeaways

  • The <blockquote> tag wraps quoted text and browsers indent it automatically, though you can change that with CSS.
  • Use the cite attribute inside the opening tag to link to the source URL, or use a <cite> element after the quote to credit the author.
  • Blockquotes are semantic HTML, meaning they carry meaning about the content itself — search engines and screen readers understand that the text is a quotation.
  • You can style blockquotes with CSS to change the indent, add a left border, adjust font size, or change the background color.

Basic blockquote syntax with and without attribution

The simplest blockquote needs only the opening and closing tags:

<blockquote> The early bird gets the worm, but the second mouse gets the cheese. </blockquote>

When you add a source, put it in a <cite> element after the quote. The <cite> tag is specifically for the title of a work or the name of a person being quoted:

<blockquote> The early bird gets the worm, but the second mouse gets the cheese. <cite>Steven Wright</cite> </blockquote>

If you want to link to the original source, add the cite attribute (note: attribute, not element) to the opening blockquote tag. This attribute holds a URL but doesn't display on the page — it's metadata for browsers and screen readers:

<blockquote cite="https://example.com/article"> The early bird gets the worm, but the second mouse gets the cheese. </blockquote>

How blockquotes look by default in the browser

Different browsers indent blockquotes slightly differently, but most add a left margin of 40 pixels and sometimes a right margin too. The text itself doesn't change — it stays the same font size and color as the surrounding paragraph text. Some browsers add extra space above and below the blockquote.

This default styling is enough to make a blockquote visually distinct, but many websites change it with CSS to match their design. The browser's built-in styling is a starting point, not a requirement.

Styling blockquotes with CSS

You can change how a blockquote looks by targeting it with CSS. Here are the most common changes:

Add a left border: A colored line on the left side is a popular way to highlight quotes. Use border-left: 4px solid #333; to add a dark gray line, or change the color and thickness to match your site.

Adjust the indent: Change the left margin with margin-left: 20px; or remove it entirely with margin-left: 0; if you're using a border instead.

Change the background: Add background-color: #f5f5f5; to put the quote on a light gray background, or use any color you want.

Adjust the font: Make the quote italic with font-style: italic;, or change the size with font-size: 1.1em;. You can also add padding inside the blockquote with padding: 15px; to give it breathing room.

A complete CSS rule for a blockquote might look like this:

blockquote { border-left: 4px solid #0066cc; margin-left: 0; padding-left: 15px; font-style: italic; background-color: #f9f9f9; }

When to use blockquote versus other quote methods

Use <blockquote> for longer quotations — usually a sentence or more, or anything that takes up its own line or paragraph. If you're quoting just a few words inside a sentence, use the <q> tag instead, which is designed for inline quotes and adds quotation marks automatically.

Don't use blockquote just because you want text indented or styled differently. Blockquote has semantic meaning — it tells screen readers and search engines that this is a quotation. If you just want to indent text for design reasons, use a <div> with CSS instead. Using the right tag for the right reason makes your page more accessible and more understandable to machines that read your code.

Common mistakes when using blockquotes

The most common mistake is nesting the <cite> element inside the blockquote when the source is a URL. The cite attribute on the blockquote tag itself is the correct place for a URL. The <cite> element is for displaying the author's name or work title on the page where readers can see it.

Another mistake is using blockquote for indentation when you don't actually have a quote. This breaks the semantic meaning of your HTML and confuses screen readers. If you need indentation for design, use CSS on a <div> or <p> instead.

A third mistake is forgetting to credit the source. Even if the blockquote tag itself doesn't require attribution, readers need to know where the quote came from. Always include the author or source somewhere visible on the page.

Frequently Asked Questions

Does blockquote automatically add quotation marks?

No. The <blockquote> tag does not add quotation marks — it only indents the text. If you want quotation marks, add them yourself in the text or use the <q> tag for inline quotes. The <q> tag does add quotation marks automatically, but it's for short quotes within a sentence.

Can I put multiple paragraphs inside a blockquote?

Yes. Wrap each paragraph in its own <p> tag inside the blockquote. The entire blockquote element will be indented as one unit, and each paragraph inside will display normally.

What's the difference between the cite attribute and the cite element?

The cite attribute holds a URL and is invisible to readers — it's metadata. The <cite> element is a tag that wraps text (like an author's name) and displays on the page. Use the attribute for linking to the source, and the element for displaying who said it.

Should I use blockquote for testimonials?

Yes, blockquote works well for testimonials because they are quotes from real people. Add the person's name in a <cite> element or in a paragraph after the quote so readers know who is speaking.

Can I style the cite element differently from the blockquote?

Yes. You can write a separate CSS rule for cite to make it smaller, a different color, or italic while keeping the blockquote styled differently. For example, blockquote cite { font-size: 0.9em; color: #666; } would make citations smaller and gray.