How to Use Stylish and Semantically Correct Quote Elements on the Web

In setting out to write this article I was going to present you with a few examples of how you could use the blockquote element in a stylish way, but I discovered something much more sinister going on.

Okay not necessarily sinister, but I found out that in many cases the blockquote element is being used incorrectly according to web standards.

It seems that many people (myself included) confuse blockquotes and pull quotes.

The main purpose of a blockquote is to separate a large section of text — quoted from an outside source — that is relevant to the source material at hand.

A pull quote is a section of the article pulled out of its context and repeated to give either emphasis, or to aid the reader in scanning the article.

The big idea is that pull quotes are not intended to be part of an article’s flow. They are a visual aid. If you removed the pull quote from the context of the article, it would read exactly the same.

Conversely, if you take the blockquote out of an article, you are missing vital information that the article is depending on.

So What Do We Do With These Quotes?

While there is no “pull quote” element, the latest iteration of the html spec encourages use of the Aside element.

The [aside] element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

Here are a few tips to keep in mind:

  • If you are repeating a section of the article for emphasis, use an aside element.
  • If you are quoting a large section from an outside source, use the blockquote element.
  • The font size of a blockquote should not be larger than the size of the main article text.
  • Don’t be redundant in your use of quotation marks. If you use them as a graphical element in the background don’t use them on the actual quote.

Why Does This Matter?

In web development we want to be as semantically correct as possible.

Each html element was created with a purpose in mind. Too often we use these elements for purposes for which they were not intended, which springs from either ignorance or laziness.

In reality, you can do whatever you want. This may seem to be a trivial matter, but it does affect how browsers and applications are developed in the future. For example, you could have an rss reader with a setting that would ignore all asides so that content would not be repeated in the flow of the article without styling.

In a perfect web world I would like to see pull quotes taken out of the content layer completely and somehow implemented in the presentation layer via css, which would give us semantic purity.

Let me give you some examples of ways you can style your quotes — however you decide to include them …

Quote Examples You Can Use

blockquote {
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px;     
    text-align: center;  
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.
blockquote {
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px; 
}
blockquote:first-letter {
    float: left;
    margin: -9px 6px 0 0;
    font-size: 35px;
}
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.
blockquote {
    border-left: 4px solid #ccc;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px 0 30px 15px;
    padding-left: 15px;     
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.
blockquote {
    background: #fcfcfc;     
    border-left: 1px dashed #ccc;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px;     
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.
blockquote {
    background: url(images/bg-quote1.png) no-repeat;     
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px 30px 30px 50px;     
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.

Download background image

blockquote {
    background: url(images/bg-quote2.png) no-repeat;     
    border-left: 1px dashed #ccc;
    color: #a5a4a4;
    font-style:italic;
    margin: 30px;
    padding: 30px 30px 30px 50px;     
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.

Download background image

blockquote {
    background:
        url(images/bg-quote3a.png) top center no-repeat,
        url(images/bg-quote3b.png) bottom center no-repeat;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px; 
    text-align: center;    
}  
The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.

Download background images:
Top background image
Bottom background image

Comments

  1. Thanks, the thing I would like to see is a simple way to make it where the blockquote pushes the quotation to say the right side of the text & has the main body text wrap around it (similar to if it was an image).

    Do you have a great way to easily do that?

    • There’s not an easy way to wrap around an “image” if that image is a background image like the ones Josh showed above. Not sure it’s ideal, but one way (and this is purely manual) would be to have a blockquote image that you actually put into the blockquote.

      • I was thinking more of the first 4 or so examples, which are just txt & CSS. I don’t know enough CSS to do it & the only solution I’ve thought of is using the column classes to manually shove the blockquote box to a side, but it would be great if you could quickly tell the blockquote to float to the right (or left) & the rest of the text would wrap around.

        • I’m sorry – you’re referring to the entire blockquote piece floating to the left of the post text? If that’s the case, then yes, it can certainly be done. Simple add float: left; and a width to the CSS and that should do the trick.

          • great & thanks, I’ll play around with that, that is something that could be done case by case in the html, right?

          • If you wanted to have blockquotes do different things (float left in some cases and right in others) you can probably assign a class to each blockquote and then define them all in the CSS.

  2. What about asides? I’d be interesting in seeing how they could be incorporated into Genesis child themes.

  3. I’m going to come back to this later today, as I really want to chew on this a bit more. Trying to figure out how to spice up my blockquotes.

  4. Great, Thanks for the ready made code to use.

    • Thanks. We felt it was important not to just give graphical examples but to make it as easy as possible to implement them as well.

  5. (my first attempt at commenting stripped out the HTML tags)
    So if you’re repeating content you use an aside and if you’re quoting outside content you use a blockquote. But what if you’re not repeating, but just paraphrasing content from your article (to drive an idea home) or wanting to insert some other sort of eye catching content (perhaps a “for more information on this sub-topic, click here”). I notice copyblogger uses a “p class=’alert'” on pages such as: http://www.copyblogger.com/smart-people-headlines/ .

    Is using a custom styled ‘p’ or ‘div’ the way to go or is there an official element we should be using instead?

    • I think you have the gist of it.

      A lot of it is up in the air right now. The latest draft of the HTML spec specifies the “aside” element for things like quotes and while I think it makes a lot of sense it is a recommendation at this point.

      To specifically answer your question, if your content can live without it I would classify it more as an aside. If it is necessary for the main article to make sense I would use a blockquote.

      As for the Copyblogger case it kind of falls in between because its not a quote, its not a repeated item but rather just something they want to emphasize. Its basically taking the em tag to another planet :)

      I would say that is more of a stylistic decision than a semantic one.

  6. Hi Josh
    I like themes that have stylish blockquotes such as Minimum theme.

    I use blockquotes to break up large areas of text, but I must admit… I don’t distinguish between B/quotes and P/quotes.

    Thanks for the warning on those “sinister” elements. LOL

  7. Great post. I will definitely bookmark this one for future projects. thanks!

  8. Ok, I didn’t even know there were 2 kinds of quotes. But in good news I haven’t been quoting anything I wrote myself so I didn’t need to use the pull quotes. Now, this is probably an obvious question – but how do you insert pull quotes into a post?
    I know that block quotes are

    quote goes here

    , but neither or work.

    This was a really interesting post, I think I might spice up my quotes at some point in the future :)

    • Since when did WordPress start removing the spaces from html in the comments? Grrr. What I meant to say was blockquote works, but pullquote or pull-quote do not, so how do I display a pull quote? :)

      • There is no specific html tag for a “pull quote.” Basically what I was saying is that if you are going to use a pull quote as a design element in your article it would probably be more semantically correct to put the pull quote in the aside container rather than the blockquote container.

  9. Good stuff! Would have never thought about it, but was interesting to read ;)

    • Yeah, its one of those things I never thought about either till I started to make the quotes a bit more stylish. Makes me wonder what info I pushed out of my brain to store this new quote info :)

  10. Great tutorial! Had some trouble trying to figure this out last week, but all good now.

  11. Hi Josh, Nice tutorial. I believe that most of the studiopress themes won come with the blockquote feature.

  12. LOVE the examples with the nearby code. I was just thinking about quotes. Another timely post. Thanks.

  13. > In a perfect web world I would like to see pull quotes taken out of the content layer completely and somehow implemented in the presentation layer via css, which would give us semantic purity.

    A pull-quote is still content in some respects, in that it’s content that has been emphasized by being repeated and styles differently.

    A solution to not manually duplicating content would be to use JavaScript. A search on your favourite search engine for “jQuery pull quotes” will turn up plugins and solutions for this from *4* years ago.

  14. This is quite helpful – although slightly beyond the reach of what I’ll call the “code-challenged,” a set of which I am a member. I can’t follow the CSS, but I hope these observations are helpful:
    1. There are actually three layout elements from the print world, perhaps four, whose usage gets mixed up on the web: pull-quote, indented quote (blockquote), callout, and annotations on the side of the outer margin. If you don’t code, you’re using a plugin to insert a pull-quote, and several excellent plugins exist – but you can’t control the style much. In any word processor, one can manage many of these functions using-one or two-celled tables and invisible grid lines. Harder to do in WordPress.
    2. As (or if) the “post-formats” function, as in the Tapestry Child Theme, keeps being used, that will give non-coding users control over some of these layout issues.

    For my money, I’d be happy some or all of this control were on this dashboard, and could be managed in the parent theme (i.e. Genesis), or in a plugin. And I’d be happy to pay for the functionality. But my comments, I’m aware, may be impractical, not knowing enough of CSS and the inner workings of WP. I haven’t written code since I was using mainframes as an undergraduate, so I certainly don’t mean this as a complaint.

  15. I ALWAYS love the stuff you crank out, Josh. You’re a one-man incredible machine!

    Fast Company have gone one step further with blockquotes and made a serious design gem out of ‘em. Check out the pullquote halfway down the page here. I just have to figure out how the heck they do it and it’s going on my site!

    http://www.fastcoexist.com/1679539/how-to-find-meaningful-work

    Keep it up, Jedi.

    • Thanks Dave, appreciate the props!

      The example you shared is very cool – and they are using the “aside” element for their quote which is timely considering the context of my article :)

  16. Fantastic distinction; I love cases like this! How about using jQuery to pull out blockquote elements into structures so as to minimise raw repetition? Obviously pros and cons, but it’d be interesting to play with a number of approaches.