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).
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!
Great post, thank you 🙂
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”.
I was JUST wondering how to do this to make my weekly recap post less blah. I would love if you would stop by my Small Victories Sunday linky and share this and 2 other posts with my readers.
I am guilty of this. Thanks hoe the tips on how to change it though.
Well oops! I’ve been doing exactly this. For me, blockquotes are HOW I make headings and I rarely actually use them for quotes. I guess I need to spend some time changing my CSS and then my templates… I had no idea that it meant anything besides a way to make my boxes. Great post, thanks so much!
Yep, the word “blockquote” can be taken literally. 🙂 It is meant to be used for sections (blocks) of quotes. Here’s the exact definition:
I’m super proud of myself because between this and your blockquote tutorial I just managed to create a child theme and edit it correctly on the FIRST try! Yay! Thanks so much 🙂
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 🙂
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!
I was kind of worried when I first saw the title of this post because I use blockquotes on my blog. But, yay! I’m using them right! Lol.
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
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…
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. 🙂
Great! Thanks a lot! I’ll go and check it out! 🙂
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.
Thanks for the information. I have only used block quotes for quotes, but I didn’t realize that google read them differently.
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!
The problem is that you’re using “background-color” when you should be using “background” like this:
“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).
Thank you! I was so frustrated that I didn’t notice it! Kudos!
Cool, I’ve been using blockquotes and headings correctly 🙂
Blockquotes are one of my best friends because I love including quotes in each of my reviews. Hmm… maybe it’s a journalist thing.
Thanks for the tip. I think I use blockquotes correctly, but it was great to see other ways to highlight text in a post. And I had no idea that google used blockquotes to search for quoted text (though it does make a lot of sense now). I love these posts!
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!
Try prefixing your h2 h3 with this:
So as an example:
.post_content h2 { /* css in here */ }It worked! Thanks so much!
Very informative! I had no idea that using a blockquote would tell a search engine that I was quoting something. It makes complete sense but now I know why I shouldn’t do it. I’ll have to work on learning how to do my own “pretty boxes” if I want something to be styled. Thanks so much for doing these posts, I learn SO much!!
I’m totally guilty of this because I’m lazy >.<
*hides*
Hey Ashley,
Can I place that CSS code into the hook section of the Tweak Me theme so I don’t have to edit each post?
NM, I answered my own question 🙂
Any idea how I can get the boxes to span the width of my post page? They are actually shorter than the text and I can’t quite figure out how to adjust that.
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; }Awesome, thanks!
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
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; }That did the trick! Thanks again, as always, for your genius!! 😀
Thanks, this is very informative! I was using the blockquote method both to colour the background of actual blockquotes but also to colour the background of my book descriptions. I will use this method going forward for the book description!
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.Hmm, I should clarify, it’s not a description from anywhere, just my own little notes I write up. I don’t use headings but thanks! this is a handy bit of code to know anyway 🙂
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.
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?
You have to find the class that’s specific to your theme. For you that’s
.entry-contentso your code would be:.entry-content h2 { }That worked! You are fantastic! Thanks! 🙂 BTW, I hope to move to wordpress someday when I have some extra $$ and I’m definitely getting my site design from you. 🙂
Awesome! 🙂
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
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.
fuck this… just wanted to share with you
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