Why You Shouldn’t Use Blockquotes Just to Make Pretty Boxes

A is not just a pretty box. They should only be used for quoted text.

A lot of people seem to think that because blockquote are often styled differently in themes, that means that blockquotes = pretty coloured box. Therefore, many of those people then use blockquote tags when they’re not quoting something, but just when they want the text to appear inside a “pretty coloured box”. So they use blockquotes for section heading, or other non-quote pieces of text. But by doing this, those people are not using logical HTML.

When you put text inside of a blockquote, you are telling Google, text-to-speech readers, and other search engines that you are quoting the text inside the blockquotes. It’s perfectly logical to do this when you’re:

  • Including a synopsis from a book/movie.
  • Including an excerpt from a book or other work.
  • Quoting words from another person.

But if you’re using blockquotes for normal headings like this:

<blockquote>New books I got this week:</blockquote>

<p>[books listed here]</p>

<blockquote>Here are some updates from my life:</blockquote>

<p>[notes about your life here]</p>

You’re making search engines think that you’re quoting those bits of text. But they’re not quotes at all! You just wanted the pretty background from the blockquote.

So what’s the correct way to do it?

Instead of just using blockquote tags, the correct thing to do is to style other elements with CSS. If you are using headings (usually one-line section titles), then you should be using heading tags like this:

<h1>New books I got this week</h1>

You can use h1, h2, h3, h4, h5 and h6 (ordered from “most important” to “least important” heading). So now you might be thinking:

“But it doesn’t look the same as the blockquote! I want a pretty background and a border!”

You have to style it the way you want with CSS. So you would add something like this to your custom CSS:

h1 {
background: green;
border: 1px solid black;
color: white;
}

(With your own background, border, and font colour preferences.)

You use CSS to style the h1 (or h2, h3, etc.) tag exactly the way you want it. You can read more about how to do this in step 3 of How to Style Blockquotes. Although I wrote that tutorial with blockquotes in mind, it can be used for any HTML elements (like heading tags!).

But what if I want to style a whole block of text that isn’t a quote and isn’t a heading?

CSS styles can be applied to any HTML element. If you just want to create a general block of text, you would do that with divs. You would have to assign a class name to the div and then put all your text inside, like so:

<div class="blue-background">
<p>All your text can go in here.</p>
<p>Multiple paragraphs!</p>
</div>

Then you can style that div however you want like this:

.blue-background {
/* CSS rules in here */
}

Don’t confuse search engines

I know just using blockquotes (something that’s already styled for you) seems a lot easier, but don’t take the easy way out! If you do that, you are confusing search engines. They’ll assume the content on your page is something different from what it actually is. One of the big goals when it comes to SEO is getting Google to understand your web pages and know exactly what they’re about. If you use blockquotes, you’re confusing Google.

It may seem like a small thing, but a huge part of SEO is having valid code that makes sense to search engines and other kinds of readers (like text-to-speech programs).

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

52 comments

  1. I’m really enjoying your tutorials! I find it so hard to make my posts and blog look anything more than basic. Yeah, I’m one of “those” people. 😛
    Even though I’ve never used blockquote to make something pretty, I now know how to making heading and pretty boxes.
    Thank you, Ashley!

    Brea Johnson recently posted: Simple Sunday (#6)
  2. This is such an eye opener. I never knew that block quotes were directly connected to search engines. Now that I do know, I’ll be more careful when using it. And thanks for providing an option for making our posts look a little less “ordinary”.

    Cassie recently posted: Discussion: Book Buying Bans
    1. Yep, the word “blockquote” can be taken literally. 🙂 It is meant to be used for sections (blocks) of quotes. Here’s the exact definition:

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

  3. I just recently figured out how to do blockquotes in my posts, luckily I’ve only been using them for book summaries and quotes/excerpts from books. I never really thought about using them for other things but I can see why some people would use them to have certain sections stand out. Thanks for shedding light on this 🙂

  4. This is such a great post! I’ve never done this, because I realized it would confuse search engines. But I never realized how to do the pretty coloured box either 🙂

    Thanks for the great post!

    Iris recently posted: THE LADY THIEF Blog Tour
  5. Oh wow I never knew that there was a difference; I had always just assumed a blockquote was for quotes, like summaries and direct quotes, but I also sometimes used it because I don’t like how my heading styles look, since they’re automatically done by Blogger. I’m definitely going to stop using blockquotes now haha. Fantastic post, Ashley! <33

    Eileen @ Singing and Reading in the Rain recently posted: Perfect Lies by Kiersten White
  6. I really love your tutorials! I’m relatively new to blogging and it’s still very frustrating when I want to do something and have to search for hours in google and most of the times end up with it not being exactly how I want it. I’m using wordpress.com, so I know there are not many possibilities to it, but could make a “basics” tutorial? For example explain what the heck CSS is? I sort of know, but still not exactly…

    Nadia @ Nadia Reads recently posted: Interview with Justine Erler, Author of Starcrush
    1. Hiya!

      I sort of have an intro tutorial already if you want to check it out: Introduction to HTML and Styling. This covers the basics of HTML and CSS (styling).

      Basically, HTML is structure and CSS is style. If you want to use a metaphor, think of HTML as the structure of a house (the wood, the beams, the foundation, etc.). Then the CSS is the interior decorating.

      If you still have questions after reading that tutorial, just let me know. 🙂

  7. I think I’m generally pretty good about this. As long as it is okay to put book blurbs/descriptions into blockquotes, I think I’m safe ;-). I could understand the temptation to make things pretty, fortunately my site just has white boxes for quotes, haha.

  8. Hello, Ashely!

    Thank you for sharing your knowledge with us! I tried to customize the blockquote on my CSS, but the background image isn’t showing up. Here’s the code I’m using:

    blockquote {
    background-color: #edf0f0 url(‘http://www.smwbookblog.com/wp-content/uploads/2014/02/blockquotenew.png’) repeat-top !important;
    border: 0px solid #a696ae !important;
    border-radius: 0px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    padding: 55px 25px 25px !important;
    box-shadow: 0px 0px 5px 0px #ccc !important;
    -webkit-box-shadow: 0px 0px 10px 0px #ccc !important;
    -moz-box-shadow: 0px 0px 10px 0px #ccc !important;
    -o-box-shadow: 0px 0px 10px 0px #ccc !important;
    }

    Thanks!

    Annaiss recently posted: GIVEAWAY: Plantilla pre-hecha
    1. The problem is that you’re using “background-color” when you should be using “background” like this:

      background: #edf0f0 url(‘http://www.smwbookblog.com/wp-content/uploads/2014/02/blockquotenew.png’) repeat-top !important;

      “background-color” is only used if you JUST want to add a colour. But “background” can be used for all the background elements (colour, image, repetition).

  9. I have a quick question. I tried changing my h2 and h3 in css like you described and it worked perfectly on the posts. But then I discovered that it was also used for elements on my blog home page and comments section – added colored box backgrounds places I didn’t want it. Is there a way to change the h2 and h3 only for the post pages and not the other ones? Thanks for all your help!

    Berls @ Fantasy is More Fun recently posted: How do you get swag? | Fun Questions
    1. Try prefixing your h2 h3 with this:

      .post_content

      So as an example:

      .post_content h2 {
      /* css in here */
      }
      1. The problem is that the boxes have padding so it actually decreases the writable area of the box. You have to offset it with negative margins. Example:

        h2 {
        margin-left:-15px;
        margin-right:-15px;
        }
  10. How do I centre the text, vertically? In all my boxes, the font it touching the top of the border and there’s a big chunk of empty space beneath. I tried Googling, but all the answers are super complicated and I’m hoping for a relatively simple (hopefully) answer, haha

    Kelly recently posted: Life of a Blogger
    1. That’s probably because actually centering your text vertically is a different issue to combat in CSS. 😀 What you’re looking for is padding. If you have paragraphs inside DIVs, they usually have margins at the bottom to create that paragraph/spacing look. That’s why there’s space on the bottom. You can offset that by adding padding to the top of the DIV like this:

      .my-class-name {
      padding-top: 15px;
      }
    1. You could get away with using blockquotes for the book description. 🙂 It’s not exactly a quote, but you are kind of quoting text from the back of a book!

      The main problem comes when you use headings like :

      “Here’s what I did today!”

      And since it’s a heading, you want it to stand out, so you wrap it in blockquote tags because those are styled differently. But that kind of text should be styled with <h1> tags or something since it’s a heading—not a quote.

  11. Well, I was completely clueless about this! I really have no idea what I’d do with you and your amazing posts. This is an old one and I stumbled across it while searching for something completely different. I’m totally guilty of using my block quotes for non-quote items. Just trying to make it all pretty. I’ve added the custom css and now I’m trying to amend the posts.

    Carrie recently posted: Night Unbound, Dianne Duvall
  12. This is exactly the post I’ve been looking for! I’ve been using blockquotes correctly, but I’ve been looking for a way to make my headers prettier. The problem I’m having is that my main headings inside posts are h2. That’s also apparently the header for everything in my sidebar. I tried adding the .post_content as you mentioned in an earlier comment but that didn’t work. I’m using blogger, not wordpress. Any suggestions?

    1. You have to find the class that’s specific to your theme. For you that’s .entry-content so your code would be:

      .entry-content h2 {
      
      }
  13. Wow, glad I saw this now and not a few months from now. I just learned how to style my blockquote the way I like, and was using it to wrap my “about the author” snippet and my “disclosure” text at the end of my post. I really do want and need to style my h1 (etc) tags, but it appears that your Chloe theme only uses the one h tag (??) so I can’t just go in and edit like I did on my old theme – and I haven’t yet found time to figure out how to add new h tags, so I’m just dealing. What I’d really like to do is have h1 = a pretty script, h2 = the nice print I have now, and h3 = a much chunkier font (Luckiest Guy or something similar) to use for my disclosure statements (top and bottom). #toomanyprojects

    1. Well you can use any heading tags you want. 🙂 There are buttons for them in the visual editor. If you can’t see them, you may need to click the button that’s called something like “Expand the kitchen sink”. It’s a visual editor button near the right side.

    1. but now that I think about it… I think you’re right… it’s easy to put it inside TinyMCE as blockquote… but I can put it in Format Blocks

Recent Posts

    Random Posts