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

[css]
blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}
[/css]