The first and foremost thing, you should decide before quoting a text in your website or blog is whether to use a Blockquote or Pull Quote. One might ask, does that really matter? The answer is, of course yes! This article will tell you the difference between the Blockquote and Pull quote, the better way to use those and few examples.
Well, I didn’t know the difference until I came across this wonderful article that told me why they are different.
BlockQuote vs PullQuote
You wanted to quote something from external source, probably from interview, other website or blog, movie or a TV show, then blockquote is used. If Blockquote is removed from the article, it means the article is missing out some important information.
Whereas Pullquote is part of the article, repetitive text generally to highlight and provide visual aid to the readers. If pullquote is removed from the article, then the article still remains the same.
Well, that’s the simple difference between the blockquote and pullquote.
Blockquote, the better way!
HTML specifications support there different tags to mark up quotations – <blockquote>, <q> and <cite>. However each tag should be used in different contexts.
<blockquote>
<blockquote> tag is generally used for larger quotations and anything inside this tag should be block-level elements such as lists, paragraphs, div or headings. <blockquote> supports an optional attribute called “cite”, whose value is the reference to the quote.
<blockquote cite="http://referencetothequote.com"><p>Blockquote supposed to contain large quotations and can include block-level tags such as div, paragraphs, headings etc...Also lookout for the optional cite argument, which points to the page from where the quotes have been taken</p></blockquote>
<q>
<q> tag is generally used for small quotations. Almost all modern browser will understand <q> tag.
<p>The paragraph starts here and you can <q>mention the in-line quote here</q> and the paragraph continues</p>
<cite>
<cite> tag is used to define the title of the work (in HTML5) such as “a book, a movie, a picture, a sculpture, a TV show etc…” and to define citation in HTML 4.01.
<p><cite>The impression sunrise</cite> by Monet in 1972.</p>
Style Blockquote with CSS
The general style to represent blockquotes are with quotation marks. But you can choose to style it with CSS. Here are few examples.
Using Images for quotes.
You wanted to quote something from external source, probably from interview, other website or blog, movie or a TV show, then blockquote is used. If Blockquote is removed from the article, it means the article is missing out some important information.
blockquote {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(//demo.techglimpse.com/images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote span {
display: block;
background-image: url(//demo.techglimpse.com/images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Another example using images
You wanted to quote something from external source, probably from interview, other website or blog, movie or a TV show, then blockquote is used. If Blockquote is removed from the article…
blockquote {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(//demo.techglimpse.com/images/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote span {
display: block;
background-image: url(//demo.techglimpse.com/images/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}I should thank CSS-tricks for the above codes.
Well, check out some interesting modern blockquote designs.
Pullquote using CSS
The new HTML5 tag <aside> lets you set up pullquote and within the <aside>, <blockquote> will be used. Check out the example on the right side with float:right and the below CSS code.
float: right;
width: 340px;
background: #f9406e;
font-weight: bold;
padding: 13px;
margin: 0 13px 13px 20px;color:#FFF;Checkout more Demos here.
