HTML Blockquote Tag: How to Create Quotes

The HTML blockquote tag defines a long quote from another source. It sets the quoted text apart from other content. Browsers usually indent blockquote content.

It adds semantic meaning to quoted sections.

How to Use the HTML Blockquote Tag

The <blockquote> tag is used in HTML to show a long quote from another source.

Here is the syntax:

<blockquote cite="source-url">
  Quoted content here
</blockquote>

The cite attribute is optional. Use it to include a source reference:

• To show a full sentence or paragraph someone else said
• To separate quoted content from your own writing
• To make your HTML more semantic (meaningful for screen readers and search engines)

You can wrap quoted text inside <blockquote> and </blockquote>. Also, you can nest tags like <p>, <cite>, and <footer> inside the blockquote. The cite attribute is an optional to point to the source URL.

You can place multiple paragraphs or inline elements inside the tag. No attribute is required. But valid nested helps browsers display content better.

Here is a quick example:

<blockquote cite="https://example.com/source">
  <p>This is a quoted paragraph.</p>
</blockquote>

Don’t use it for:

• Short quotes (use <q> for that)
• Style only (use CSS instead)

So, when to use the HTML Blockquote tag?

• Use it to quote long text from outside sources.
• This fits well in interviews, articles, and reviews.
• The tag makes the quote clear to readers. It helps them track the source.
• Do not use it for design purposes. Use it only for real quotes.
• Correct use helps SEO and aids assistive tools.

Styles the HTML Blockquote Tag

If you don’t style the <blockquote> tag, The browser apply these default styles:

• Indented from the left (margin-left)
• Displayed as a block-level element
• No quotation marks by default
• Extra top and bottom spaces

Here is a simple example of how to style it:

blockquote {
  border-left: 4px solid #ccc;
  margin: 1em 0;
  padding-left: 1em;
  color: #666;
  font-style: italic;
}

This CSS code adds a left border and improves the visual cue for quoted content.

Here is another example to custom quotation marks with CSS:

blockquote::before {
  content: "“";
  font-size: 2em;
  color: #999;
  vertical-align: top;
}

blockquote::after {
  content: "”";
  font-size: 2em;
  color: #999;
  vertical-align: bottom;
}

What this does:

• It adds a large opening quote before the block
• It adds a closing quote after it
• You control size, color, and position

The Difference Between HTML <blockquote> Tag and <q> Tag

Both <blockquote> and <q> are used to show quotes in HTML, but they work differently and have different use cases.

Here is a table that shows you key differences:

The q tag adds quote marks by default while Blockquote does not. The blockquote used for standalone quotes. But, the q used when you quote a phrase.

Examples of Blockquote Element

Here is an extended use case:

<blockquote cite="https://example.com/article">
  <p>This is the first paragraph of the quote.</p>
  <p>Here is a second paragraph to extend the quotation.</p>
  <footer>
    — Author Name, <cite>Source Title</cite>
  </footer>
</blockquote>

This adds citation inside the blockquote and gives both structure and meaning.

You can embed blockquotes in blog sections, and you can load quotes with JavaScript. Also, you can pair with semantic tags like <figure>.

Wrapping Up

In this article you learned what the HTML blockquote tag does and how to use it in real code.

Here is a quick recap:

• Use <blockquote> to mark long quotes from other sources.
• Wrap quotes with semantic tags like <p>, <footer>, or <cite>.
• Add the cite attribute to link to the source.
• Style with CSS to match your design.
• Use blockquote only for real quotations, not visual design.

  This is a quoted paragraph from another website.

blockquote {
  border-left: 4px solid #ccc;
  padding-left: 10px;
  color: #555;
}

Similar Reads