Internet, Networking, & Security Web Development 24 24 people found this article helpful What Is a Blockquote? Use blockquotes in your web pages with HTML By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated March 08, 2020 Web Development CSS & HTML Web Design SQL Tweet Share Email 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. Lifewire / Lara Antal 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 tovesDid 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. 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 pull quote concept that we covered previously. 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: <blockquote>Closing: </blockquote> For example: <blockquote>’Twas brillig and the slithey toves<br>Did gyre and gimble in the wabe:<br>All mimsy were the borogoves,<br>And the mome raths outgrabe.</blockquote> Add the pair of blockquote tags around the content of the quote itself. In this example, we also used some break tags (<br>) 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!).