What Is a Blockquote?

If you've ever looked at a list of HTML elements, you may have found yourself asking "what is a blockquote?" The blockquote element is an HTML tag pair that is used to define long quotations. Here is the definition of this element according to the W3C HTML5 specification:

The blockquote element represents a section that is quoted from another source.

How to Use Blockquote on Your Webpages

When you're writing text on a web page and creating that page's layout, you sometimes want to call out a block of text as a quotation. This could be a quote from somewhere else, like a customer testimonial that accompanies a case study or project success story.

This could also be a design treatment that repeats some important text from the article or content itself. In publishing, this is sometimes called a pull quote, In web design, one of the ways to achieve this (and the way that we are covering in this article) is called a blockquote.

So let's look at how you would use the blockquote tag to define long quotations, such as this excerpt from “The Jabberwocky” by Lewis Carroll:

'Twas brillig and the slithey toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

(by Lewis Carroll)

Example of Using the Blockquote Tag

The blockquote tag is a semantic tag that tells the browser or user agent that the contents are a long quotation. As such, you should not enclose text that is not a quotation inside the blockquote tag.

When you think about it, that pull quote is a quote of text, it just happens to be from the same article that the quote itself appears in.

Most web browsers add some indenting (about 5 spaces) to both sides of a blockquote to make it stand out from the surrounding text. Some extremely old browsers may even render the quoted text in italics. Remember that this is simply the default styling of the blockquote element.

With CSS, you have total control over how your blockquote will display. You can increase or even remove the indent, add background colors or increase text size to further call out the quote. You can float that quote to one side of the page and have the other text wrap around it, which is a common visual style used for pull quotes in printed magazines.

You have control over the blockquote's appearance with CSS, something we will discuss a little more shortly. For now, let's continue looking at how to add the quote itself to your HTML markup.

To add the blockquote tag to your text, simply surround the text that is a quotation with the following tag pair:

• Opening:

• Closing:

For example:

’Twas brillig and the slithey toves

Did gyre and gimble in the wabe:

All mimsy were the borogoves,

And the mome raths outgrabe.

Add the pair of blockquote tags around the content of the quote itself. In this example, we also used some break tags (
) to add single line breaks where appropriate inside of the text. This is because we are recreating text from a poem, where those specific breaks are important.

If you were creating a customer testimonial quote, and the lines did not need to break in specific parts, you would not want to add these break tags and allow the browser itself to wrap and break as needed based on the screen size.

Do Not Use Blockquote to Indent Text

For many years, people used the blockquote tag if they wanted to indent text on their webpage, even if that text was not a pull quote. This is a bad practice! You do not want to use the semantics of blockquote solely for visual reasons.

If you need to indent your text, you should use style sheets, not the blockquote tags (unless, of course, what you are trying to indent is a quote!).