What is a Blockquote?

Blockquote
How to use the Blockquote HTMl element. Jeremy Girard

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 in 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.Remember, a "quotation" is often actual words that someone has said or text from an outside source (like the Lewis Carroll text in this article), but it can also be the pullquote concept that we covered previously.

When you think about it, that pullquote 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 commonly visual style used for pullquotes 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 -

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.

As you can see, you simply 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 your 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 pullquote. 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!). Try putting this code in your web page if you are trying simply to add an indent:

 

This will be text that is indented.

 

Next, you would target that class with a CSS style

.indented {
    padding: 0 10px;
}

This adds the 10 pixels of padding to either side of the paragraph.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 5/8/17.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "What is a Blockquote?" ThoughtCo, May. 17, 2017, thoughtco.com/what-is-a-blockquote-3468272. Kyrnin, Jennifer. (2017, May 17). What is a Blockquote? Retrieved from https://www.thoughtco.com/what-is-a-blockquote-3468272 Kyrnin, Jennifer. "What is a Blockquote?" ThoughtCo. https://www.thoughtco.com/what-is-a-blockquote-3468272 (accessed November 23, 2017).