Block quote creates an indented section for longer quoted text

A block quote is an HTML element that marks a longer passage of text as a quotation — usually several sentences or a paragraph. Browsers display it indented from the left margin, which signals to anyone reading the page that the text came from somewhere else. You use the <blockquote> tag to wrap the quoted material.

The main difference from a regular paragraph is visual: block quote stands out. It also tells search engines and screen readers that the content is a citation, which matters for accessibility and for search results that pull quotes from your page.

Key Takeaways

  • Wrap longer quotations in <blockquote></blockquote> tags, and the browser will indent them automatically.
  • Add a <cite> tag inside or after the blockquote to identify the source, and use the cite attribute to link to the original.
  • Block quote is for quotations that are a sentence or longer; for short quoted phrases within a sentence, use the <q> tag instead.
  • You can style block quotes with CSS to change the indentation, add a left border, adjust the font, or add a background color.

The basic HTML structure for a block quote

The simplest block quote wraps the quoted text in opening and closing tags:

The early bird gets the worm, but the second mouse gets the cheese.

In your HTML file, this looks like:

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

The paragraph tag inside the blockquote is optional for very short quotes, but it is standard practice and keeps your HTML cleaner. Most browsers add left indentation automatically, though the amount varies.

Adding a source with the cite attribute and tag

To tell readers where the quote came from, use the cite attribute on the blockquote tag itself. Point it to the URL of the original source:

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

The cite attribute is invisible to readers — it is metadata for browsers and screen readers. To show the source on the page itself, add a <cite> tag (note: different spelling) after the blockquote:

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

The <cite> tag is for the title of the work or the name of the author. Browsers usually display it in italics. Wrapping it in a link makes it clickable so readers can visit the original source.

Styling block quotes with CSS

By default, block quotes are indented but otherwise plain. You can change their appearance with CSS rules. A common pattern is to add a thick left border and some padding:

blockquote { border-left: 4px solid #333; padding-left: 20px; margin-left: 0; }

This removes the browser's default left margin, adds a dark gray line on the left side, and creates space between that line and the text. You can also change the font size, color, or background:

blockquote { border-left: 4px solid #0066cc; padding-left: 20px; font-size: 18px; color: #555; background-color: #f9f9f9; }

You can also style the <cite> tag separately to make the source stand out differently from the quote itself. The goal is to make it visually clear that the text is a quotation and where it came from.

Block quote versus the q tag for short quotes

Use <blockquote> for quotations that are a full sentence or longer. For a short phrase quoted within a sentence, use the <q> tag instead:

<p>The saying goes, <q>the early bird gets the worm</q>, but I prefer to sleep in.</p>

The <q> tag does not create a line break or indentation. Most browsers add quotation marks around the text automatically. Like blockquote, it can have a cite attribute pointing to the source, but the source itself does not appear on the page unless you add it separately.

If you are quoting multiple sentences or a full paragraph, block quote is the right choice. If you are quoting a few words or a short phrase that flows within your own sentence, use <q>.

Common mistakes and how to fix them

The most common error is forgetting that the cite attribute is invisible. Readers cannot click it or see where the quote came from. Always add a visible <cite> tag or a sentence that names the source if you want readers to know where the text originated.

Another mistake is nesting block quotes incorrectly. If you are quoting someone who quoted someone else, nest the tags properly:

<blockquote> <p>She said, <blockquote><p>The early bird gets the worm.</p></blockquote></p> </blockquote>

Some developers add quotation marks manually inside the blockquote, but this is redundant if you are using the <q> tag or if your CSS adds them. Let the HTML and CSS do the work instead.

Frequently Asked Questions

Does block quote affect how search engines read my page?

Yes. Search engines recognize the blockquote tag and understand that the content is a quotation, not your own writing. This helps them index your page correctly and can affect how snippets appear in search results. Using blockquote also signals to screen readers that the text is cited material, which improves accessibility.

Can I put a block quote inside another block quote?

Yes. Nesting blockquotes is valid HTML and useful when you are quoting someone who quoted someone else. Each blockquote tag should have its own opening and closing tags, and you can style them differently with CSS if you want the inner quote to look distinct from the outer one.

What if I want to quote just one word or a short phrase?

Use the <q> tag instead of blockquote. The <q> tag is for inline quotations — short phrases that appear within a sentence. Browsers add quotation marks automatically, and it does not create a line break or indentation the way blockquote does.

How do I make a block quote look different on mobile versus desktop?

Use CSS media queries. You can set one style for blockquote on desktop and a different style on smaller screens. For example, you might reduce the font size or the left border width on mobile to save space. Write your mobile styles first, then use @media (min-width: 768px) to add larger-screen rules.

Is the cite attribute required?

No. The cite attribute is optional and invisible to readers. Use it if you want to document the source in your code or if you are building a tool that reads the HTML. If you want readers to see where the quote came from, add a visible <cite> tag or a sentence that names the source.