As I mentioned in my introduction, this series is going to take a close look at the fundamentals of semantic markup. In this first installment, I'm focusing on quotes and citations.
Before we get started, if you'd like to know more about semantic markup — what it is, why you should develop your sites with it — check out my article, Meaningful Markup: POSH and Beyond.
Now, let's get to it!
Content First
My approach to writing markup always starts with the content, because knowing the nuances of content definitely affects the final markup. Let's consider quotes:
- Will the quote include a citation to the source? Is the source online?
- Will the source citation require a link users can select?
- Is the quote to appear on its own or within a body of text?
- Does the quote contain block-level elements (such as several paragraphs or a list)?
Once you know the answer to these questions, you can get started on the markup.
Semantic Elements
Before you begin marking up those quotes, you should know which elements are at your disposal for this type of content.
<blockquote>
The <blockquote> is a block-level element intended for (comparatively) large quotations that contains other block-level elements. A <blockquote> could be a single paragraph, a series of paragraphs, a paragraph and a list, paragraphs and headings … you get the picture.
In real-world context, a <blockquote> may contain an excerpt from a book or resource. It can also be a relatively lengthy testimonal, as you might see on some companies' web sites. And, of course, <blockquote> could also be an actual quote; something a person said in conversation, in a speech, in a presentation.
Since I'm in the mood for a bit of ego stroking, let's apply <blockquote> to my LinkedIn recommendation from my former boss:
<blockquote>-
<p>Emily is hands-down the best XHTML/CSS designer I've known. She consistently cranks out the most semantic, valid XHTML/CSS web designs in amazingly short order. Most importantly, she keeps the user experience and semantics in mind... setting the bar for code quality that has not yet been met even by companies netting $400-800k for web design projects.</p> -
<p>I always compare XHTML mark up and CSS code quality from other companies to Emily's and every time I'm disappointed. If I want the best, lightest, most semantic XHTML designs, I go to Emily. Other companies and individuals might come up with XHTML that validates, but only Emily's is as efficient and as semantic as possible.</p> </blockquote>
The cite Attribute
If your <blockquote> content is from an online source, you can indicate that source via the cite attribute with a valid URL. The above recommendation example is, indeed, online:
<blockquote cite="http://www.linkedin.com/in/emilyplewis">-
<p>Emily is hands-down the best XHTML/CSS designer I've known. She consistently cranks out the most semantic, valid XHTML/CSS web designs in amazingly short order. Most importantly, she keeps the user experience and semantics in mind... setting the bar for code quality that has not yet been met even by companies netting $400-800k for web design projects.</p> -
<p>I always compare XHTML mark up and CSS code quality from other companies to Emily's and every time I'm disappointed. If I want the best, lightest, most semantic XHTML designs, I go to Emily. Other companies and individuals might come up with XHTML that validates, but only Emily's is as efficient and as semantic as possible.</p> </blockquote>
Rendering & Interpretation
In terms of how browsers render <blockquote>s, they are typically displayed with a left indent. It is this visual presentation that led to much abuse of <blockquote>. Some less–than–savvy developers use(d) it to give content an indent. And that's a big ole no-no.
Screen readers, meanwhile, will often announce the beginning and end of a <blockquote> to give users context of the content.
<q>
The <q> is an inline element used for, you guessed it, quotes that appear inline within other text (like a sentence) and do not require any block-level elements, such as paragraph breaks.
In the real-world, <q> is most often appropriate for comparatively shorter quotes, such as a simple phrase or statement within a paragraph or sentence:
<p>When I was younger, my mom used to do my hair before school. And in her morning rush, I often got forehead burns from the curling iron as she did my bangs. Her response? <q>Beauty is pain.</q> And thus began my indoctrination into society's pursuit of beauty.</p>
The cite Attribute
Just like <blockquote>, you can also use the cite attribute with <q> to indicate the source, if it's online, of the quote:
<p>Wikipedia defines citations as <q cite="http://en.wikipedia.org/wiki/Citations">a reference to a published or unpublished source</q>.</p>
Rendering & Interpretation
Browsers are supposed to render <q> elements with quotation marks before and after the content. As such, the W3C advises authors against including quotation marks in the content itself.
Furthermore, if you nest <q>s, browsers are supposed to render both the inner and outer quotes with the proper punctuation. In American English, for example, this would mean the inner quote would be delimited with single quotation marks, while the outer quote would begin and end with double quotation marks.
However, browsers makers often go their own ways, which is what Internet Explorer did and, as such, all versions of IE prior to IE8 do not add those delimiting quotation marks. The other major browsers, however, do insert quotation marks.
It is worth mentioning, that quotation marks vary according to language. As such, best practices recommend specifying the lang attribute for <q> to ensure the proper punctuation is applied:
<p>Wikipedia defines citations as <q lang="en-us" cite="http://en.wikipedia.org/wiki/Citations">a reference to a published or unpublished source</q>.</p>
As far as screen readers go, they don't seem to treat content within <q>s any differently than other content. They don't announce the beginning or end of the quote, as with <blockquote>.
<cite>
While I've mentioned the cite attribute, there is also a <cite> element. It is an inline element used for references to a source. In other words, a citation.
And, as a sidenote, I'm not embarrassed to admit that for years, I was incorrectly using this element for inline quote content. I didn't even realize there was a <q> element, much less that <cite> is intended for references to other work, not the actual reference itself.
In real-world practice, <cite> can be used in conjunction with a quote, to indicate the source of the quote … a person, book, whatever. This is particularly useful if the source is not online and, therefore, you can't use the cite attribute with <blockquote> or <q>:
<blockquote>-
<p>Mr. L. Prosser was, as they say, only human. In other words he was a carbon-based bipedal life form descended from an ape. More specifically he was forty, fat and shabby and worked for the local council.</p> -
<p><cite>The Hitchhiker's Guide to the Galaxy</cite></p> </blockquote>
Update
Thanks to a comment from Chris Pederick, I've already learned something new from this series (yay!).
It seems the HTML5 working draft says using <cite> when referencing a person is a no-no. Instead, we can use <b> or <span>. What. The. Fuck!?
Yeah, that just seems stupid to me. And a step away from semantics. But, oh well, lots of stuff in specifications are stupid to me. And who knows, the final HTML5 spec is a ways off, so it could change.
Want to try to help make it change? Contribute to the WHATWG wiki page documenting uses of <cite> in reference to people.
I now return you to regularly scheduled programming …
Note that if you use <cite> within <blockquote>, you must first contain it with another block-level element, because <cite> is inline and <blockquote> can only contain block-level elements:
<blockquote>- …
-
<p><cite>The Hitchhiker's Guide to the Galaxy</cite></p> </blockquote>
And even if you are referencing an online source, you can still use <cite> along with the cite attribute:
<blockquote cite="http://en.wikipedia.org/wiki/Citations">-
<p>A prime purpose of a citation is intellectual honesty; to attribute to other authors the ideas they have previously expressed, rather than give the appearance to the work's readers that the work's authors are the original wellsprings of those ideas.</p> -
<p><cite>Wikipedia</cite></p> </blockquote>
When I am dealing with an online source, as in the above example, I often drop in a link as a containing element for <cite>:
<blockquote cite="http://en.wikipedia.org/wiki/Citations">-
<p>A prime purpose of a citation is intellectual honesty; to attribute to other authors the ideas they have previously expressed, rather than give the appearance to the work's readers that the work's authors are the original wellsprings of those ideas.</p> -
<p><a href="http://en.wikipedia.org/wiki/Citations"><cite>Wikipedia</cite></a></p> </blockquote>
You don't, however, have to make the <a> href value the same URL as that of cite.
Consider the earlier LinkedIn recommendation example. The recommendation exists on my profile page, so that makes sense as the URL for the cite attribute. But if I wanted to include my former boss's name as the <cite> reference, I would typically provide a link to his personal site:
<blockquote cite="http://www.linkedin.com/in/emilyplewis">-
<p>Emily is hands-down the best XHTML/CSS designer I've known. She consistently cranks out the most semantic, valid XHTML/CSS web designs in amazingly short order. Most importantly, she keeps the user experience and semantics in mind... setting the bar for code quality that has not yet been met even by companies netting $400-800k for web design projects.</p> -
<p>I always compare XHTML mark up and CSS code quality from other companies to Emily's and every time I'm disappointed. If I want the best, lightest, most semantic XHTML designs, I go to Emily. Other companies and individuals might come up with XHTML that validates, but only Emily's is as efficient and as semantic as possible.</p> -
<p><a href="http://www.ianpitts.com/"><cite>Ian Pitts</cite></a></p> </blockquote>
And just for purposes of demonstration, since all of the above examples use <blockquote>, <cite> can absolutely be used to reference the source of <q> content:
<p><cite>Wikipedia</cite> defines citations as <q cite="http://en.wikipedia.org/wiki/Citations">a reference to a published or unpublished source</q>.</p>
<cite> can also be used as a direct reference to a source without any quote content, such as in my previous paragraph where I mentioned the W3C and provided a link to the W3C's specification:
<p>Browsers are supposed to render q elements with quotation marks before and after the content. As such, the <cite>W3C</cite> advises authors <a href="http://www.w3.org/TR/html401/struct/text.html#h-9.2.2">against including quotation marks in the content</a> itself.</p>
Rendering & Interpretation
The default browser rendering of <cite> is often in italics. As for screen readers, they don't treat content contained by <cite> in any special way.
Enter Microformats
Whenever I see content that includes a name (person, place or organization), I immediately think of the hCard microformat for marking up contact information. Since my LinkedIn recommendation example includes the name and web site of a person, it is a good fit for hCard:
<blockquote cite="http://www.linkedin.com/in/emilyplewis">-
<p>Emily is hands-down the best XHTML/CSS designer I've known. She consistently cranks out the most semantic, valid XHTML/CSS web designs in amazingly short order. Most importantly, she keeps the user experience and semantics in mind... setting the bar for code quality that has not yet been met even by companies netting $400-800k for web design projects.</p> -
<p>I always compare XHTML mark up and CSS code quality from other companies to Emily's and every time I'm disappointed. If I want the best, lightest, most semantic XHTML designs, I go to Emily. Other companies and individuals might come up with XHTML that validates, but only Emily's is as efficient and as semantic as possible.</p> -
<p class="vcard"><a href="http://www.ianpitts.com/" class="url"><cite class="fn">Ian Pitts</cite></a></p> </blockquote>
Don't know what hCard is? No problem, check out part 3 of my Getting Semantic With Microformats series.
Real-World Applications
Now that you know the fundamental structure and semantic uses of these elements, where might you use them? I've already mentioned testimonials and in-text quotes, but how about:
<blockquote>for blog comments<blockquote>for excerpts of reviews<blockquote>or even<q>for status updates on social networks<q>for colloquialisms<cite>any time you mention a resource
And I'm sure there are many more. It is really about considering your content and deciding what is semantically appropriate for it.
Debbie Downer Wants to Know Why
I'm not going to get too much into the specifics of why you should be using these elements for your quotation and referenced content. Again, I refer you to Meaningful Markup for that.
But I'm not clueless about those folks out there who poo-poo these approaches (I did work for a huge corporate monster for five years). Maybe it is the .NET developer on your team who only knows how to (horrifically) use <div>s. Maybe it is the department VP who thinks since her nephew can make web sites, it is simple, straightforward and markup doesn't matter.
For those folks, I offer the following:
- Semantic markup supports today's web standards. And aside from being standards that all web professionals should aim for, they do have ROI.
- Semantic markup provides the foundation for accessible sites.
- Semantic markup can provide design patterns to help streamline team development. If everyone knows that
<blockquote>with<cite>is to be used instead of a series of<div>s,<span>s,<br />s and the like, less time is needed to not only develop markup, but also to style that markup. - Semantic markup can contribute to SEO to help improve your content's findability.
For Your Consideration
It just wouldn't be the web we all know and love if there weren't debates and issues. <q> and <cite> aren't immune.
No Love for <q>
Some designers, fed up with IE's lack of delimiting quotation marks for <q>, drop the element entirely from their markup. Some turn to JavaScript or CSS to add the quotation marks.
As for me, I don't sweat it too much. Depending on the client and project, I may serve conditional CSS to IE (versions prior to 8) so that the <q> content appears in italics. That's about as far as I go. I encourage you to decide for yourself, but first maybe a bit more information to help your decision-making:
<cite> Is Better?
Also, there are some folks who feel that <cite> can be used similarly to <q> for inline quotes or citations. And since <q> has inconsistent browser rendering, <cite> is the better way to go.
True, the W3C spec states <cite> contains a citation or a reference to other sources,
and I can understand that some people think a citation can be an actual quote or excerpt.
But I disagree here. My understanding of citation aligns with Wikipedia's definition of a reference to a published or unpublished source.
So, semantically, I see <q> as being specific to inline quotes, referenced content, etc., while <cite> is the source of the referenced content.
Stop Picking Sides and Just Develop
Ultimately, though, I try to avoid getting too wedded to any single approach to anything. The web is constantly evolving and, as such, I try to be the kind of professional that evolves with it.
Plus, I don't know everything and I'm okay with that. I like to see what other people are doing, think about what makes the most semantic (and usable and accessible) sense for me and my sites, and then just do it. When I encounter a new idea, I consider it and, if necessary, make changes to my approach. Which is one of the primary reasons I started this series.
So, let me know what you think about my approaches to <blockquote>, <q> and <cite>. If you have other ideas, please share them.
Coming Next
I'm still deciding on the topic for part 2. Right now, it is a toss-up between images with captions and accessible <table>s. You'll just have to stay tuned to find out!
See what I did there? A cliffhanger! How exciting!
♥ Share the Love