NOTE: (6/11/2013) The definitions of cite and blockquote in HTML have changed. For the latest advice on using these elements refer to cite and blockquote – reloaded

<blockquote>

<q>

cite

<cite>

<blockquote>

Quoting with <blockquote> # We’ve become pretty familiar with <blockquote> here, as most of our articles feature excerpts from the HTML5 specification. Look, here’s one right now: The blockquote element represents a section that is quoted from another source. — W3C HTML5 specification Easy peasy, right? Nothing has really changed. Remember that as <blockquote> is a ‘block-level element’ (flow content) we can put most anything in it, including headers, images and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though. <blockquote> is a sectioning root, meaning that any <h1> - <h6> elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing <p> tags is now completely kosher. Here are some simple <blockquote> examples (apologies for the fake content): <blockquote>This is a short block quote — look Ma, no paragraph tags!</blockquote> This is a short block quote — look Ma, no paragraph tags! <blockquote><p>This is a longer block quote.</p> <p>It uses paragraph elements.</p> </blockquote> This is a longer block quote. It uses paragraph elements. <blockquote><h1>OMG a heading!</h1> <ul><li>Block quotes can contain more than just paragraphs…</li></ul> </blockquote> OMG a heading! Block quotes can contain more than just paragraphs… Historically, adding the source of a <blockquote> was a semantic conundrum. If you add it as content of the <blockquote> , then semantically it would become part of the quote, right? <blockquote> (and <q> ) have a cite attribute for the URL of the quote’s source, to provide context. That’s hidden data, however, and despite Non-conforming means that while it will validate, adding a <footer> that isn’t in the quote’s source goes against the spec 2011-07-11 It seems our long-running convention at HTML5 Doctor of using <footer> for attribution inside a <blockquote> is actually <footer> for attribution in a <blockquote> isn’t strictly valid, and may not be in the future either. The spec currently recommends including attribution in content surrounding the <blockquote> . It seems our long-running convention at HTML5 Doctor of usingfor attribution inside ais actually non-conforming . However the phrase in the spec that prevents it also prevents other common block quoting patterns, so the spec will probably change. Read my article <blockquote> problems and solutions , and submit feedback via the WHATWG email list , the comments here or to be via Twitter (@boblet) — your feedback will influence how the spec changes! I’ll update this article after the change, but until then be aware, and may not be in the future either. The spec currently recommends including attribution in content surrounding the We’ve become pretty familiar withhere, as most of our articles feature excerpts from the HTML5 specification. Look, here’s one right now:Easy peasy, right? Nothing has really changed. Remember that asis a ‘block-level element’ (flow content) we can put most anything in it, including headers, images and tables, in addition to the usual paragraphs of text. There are a couple of slight differences in HTML5 though.is a sectioning root, meaning that anyelements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosingtags is now completely kosher. Here are some simpleexamples (apologies for the fake content):Historically, adding the source of awas a semantic conundrum. If you add it as content of the, then semantically it would become part of the quote, right?(and) have aattribute for the URL of the quote’s source, to provide context. That’s hidden data, however, and despite the potential for exposing the cite attribute via CSS and/or JS , that’s not as useful as a visible link. 2012-02-14 Hixie has given his feedback on my email, and it seems like our <footer> citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in <figcaption> . Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet… <footer> element, allowing us to add semantically separate information about the quote. For example: <blockquote> <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p> <footer>— Crazy hunch-backed old guy from the movie Aladdin</footer> </blockquote> You know the golden rule, don’t you boy? Those who have the gold make the rules. — Crazy hunch-backed old guy from the movie Aladdin Because of this semantically sound way to show the quote’s source, if you’re going to add a cite attribute on <blockquote> , only do so in addition to visible attribution . <blockquote cite="http://www.imdb.com/character/ch0000672/quotes"> <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p> <footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy in Aladdin</a></footer> </blockquote> You’ve heard of the golden rule, haven’t you? Whoever has the gold makes the rules. — Crazy hunch-backed old guy in Aladdin HTML5 comes to our rescue with theelement, allowing us to add semantically separate information about the quote. For example:Because of this semantically sound way to show the quote’s source, cite attribute is probably only worth it if you can automate it (or you're just crazy OCD ;). We’ll return to <blockquote> in a bit, but let’s first probe into <q> . attribute is probably only worth it if you can automate it (or you're just crazy OCD ;). We’ll return toin a bit, but let’s first probe into

Inline quotations with <q> # <q> is for quoting something inline within a section of prose: The q element represents some phrasing content quoted from another source. — W3C HTML5 specification This means we can’t use <q> for sarcasm or other non-quotation uses of quote marks (“”). In those cases, add punctuation manually. The spec continues: Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent. — W3C HTML5 specification As with <blockquote> , you can also add a cite attribute with a URL for the quotation’s source (subject to the above caveats against hidden data). If you’re not using these extra features though, it’s a toss-up as to whether <q> is any better than just adding punctuation characters like “” as you type. Okay, let’s see some specimens: Nested quotations: <p>Luke continued, <q>And then she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool…</p> Luke continued, And then she called him a scruffy-looking nerf-herder ! I think I’ve got a chance! The poor naive fool… Language-appropriate quotations (example updated, thanks Zev, Bertil, & Janus) : For more information see styling foreign quotations <ul> <li lang="ja">彼女は<q>日本語に猫は『にゃん』と鳴く</q>と言った。</li> <li><i lang="ja-latn">Kanojo wa <q>Nihongo ni neko wa ‘nyan’ to naku</q> to itta.</i></li> <li>She said <q>In Japanese cats say <i lang="ja-latn">nyan</i></q>.</li> </ul> 彼女は 猫は『にゃん』と鳴く と言った。

と言った。 Kanojo wa Nihongo ni neko wa ‘nyan’ to naku to itta.

She said In Japanese cats say nyan . A quotation using the cite attribute. Note that I’ve also included the cite attribute’s link in content so it’s accessible: <p><a href="http://www.imdb.com/character/ch0000672/quotes">The Aladdin character Jafar</a> presents an eloquent treatise on the recent global economic meltdown when he states <q cite="http://www.imdb.com/character/ch0000672/quotes">You know the golden rule, don’t you boy? Those who have the gold make the rules.</q></p> The Aladdin character Jafar presents an eloquent treatise on the recent global economic meltdown when he states You know the golden rule, don’t you boy? Those who have the gold make the rules. Let’s examine how to style these elements next. is for quoting something inline within a section of prose:This means we can’t usefor sarcasm or other non-quotation uses of quote marks (“”). In those cases, add punctuation manually. The spec continues:As with, you can also add aattribute with a URL for the quotation’s source (subject to the above caveats against hidden data). If you’re not using these extra features though, it’s a toss-up as to whetheris any better than just adding punctuation characters like “” as you type. Okay, let’s see some specimens:Let’s examine how to style these elements next.

Styling <q> and <blockquote> # Historically, browser support has been patchy for controlling the punctuation used by <q> . Things have settled down now, so we can define nested, language-specific and even author-defined punctuation via CSS. Browser support for styling quotes IE Firefox Safari Chrome Opera Default <q> punctuation¹ 8.0 “” ‘’ 1.5 “” ‘’ 2.0 "" 4.0? "" '' 1.0? "" '' 4.0 “” ‘’ quotes with Unicode escapes 8.0 1.5 5.1² 11.0² 4.0³ quotes with glyphs 8.0 1.5 5.1² 11.0² 4.0³ Default <q> support requires on :before and :after Webkit support has been weak, with "" and '' hard-coded until Safari 5.1 and Chrome 11. Ref: WebKit bugs 6503 (fixed) and 3234 (new). Opera is buggy if you nest <q> to a greater depth than quote pairs in your quotes property (test case) “Correct” punctuation is an intricate topic and Quote punctuation characters Glyph Description Unicode escape Entity Mac Windows Linux “ Left double quotation mark \201C “ Option - [ Alt + 0147 AltGr + V ” Right double quotation mark \201D ” Option - Shift - [ Alt + 0148 AltGr + B ‘ Left single quotation mark \2018 ‘ Option - ] Alt + 0145 AltGr + Shift + V ’ Right single quotation mark \2019 ’ Option - Shift - ] Alt + 0146 AltGr + Shift + B « Double left-pointing angle quotation mark \00AB « Option - \ Alt + 174 AltGr + [ » Double right-pointing angle quotation mark \00BB » Option - Shift - \ Alt + 175 AltGr + ] ‹ Single left-pointing angle quotation mark \2039 ‹ Option - Shift - 3 Alt + 0139 - › Single right-pointing angle quotation mark \203A › Option - Shift - 4 Alt + 0155 - „ Double low-9 quotation mark \201E „ Option - Shift - W Alt + 0132 - ‚ Single low-9 quotation mark \201A ‚ - - - Narrow no-break space \202F - - - More info on keyboard shortcuts for entering special characters, including how to enter them via Unicode escape codes (hex input) on Macs & PCs Historically, browser support has been patchy for controlling the punctuation used by. Things have settled down now, so we can define nested, language-specific and even author-defined punctuation via CSS.“Correct” punctuation is an intricate topic and varies depending on language , but it generally involves these characters: If you’re using the charset UTF-8 (and you should be), we recommend you use the actual characters if possible, rather than the Unicode escapes in CSS or the entities in HTML. You can enter most of these using the keyboard — e.g. “ is Opt - [ on Mac, Alt + 0147 on Windows, and AltGr + V on Linux. Avoid using ", ' or ` in place of “” and ‘’. The “narrow no-break space” is used inside French guillemets. Most languages alternate between two kinds of punctuation as quotes are nested, such as “” and ‘’ in English. To specify nested quote pairs in CSS, we would write this: q {quotes: '“' '”' '‘' '’';} /* opening followed by closing quote pairs */ /* The equivalent using Unicode escapes: q {quotes: '\201C' '\201D' '\2018' '\2019';} */ q:before {content: open-quote;} q:after {content: close-quote;} Unfortunately, browsers use the last quote pair in the quotes property for more deeply nested quotations. In addition, Opera will use the wrong quote characters if you have more nested <q> than your quotes property defines quoting levels for (Opera quotes bug test case). Make sure you have enough levels by repeating quote pairs as necessary: /* four levels of nested quotes */ q {quotes: '“' '”' '‘' '’' '“' '”' '‘' '’';} WebKit had "" and '' hard-coded in the browser stylesheet until Safari 5.1 and Chrome 11, which prevented q:before {content: open-quote;} and q:after {content: close-quote;} from working. open-quote and close-quote . While it’s a little more involved, that’s why we use this CSS on HTML5 Doctor: /* for two levels of nested quotations */ q {quotes: '“' '”' '‘' '’';} /* extra content definitions for pre-2011 WebKit */ q:before {content: '“'; content: open-quote;} q:after {content: '”'; content: close-quote;} q q:before {content: '‘'; content: open-quote;} q q:after {content: '’'; content: close-quote;} /* q in blockquote */ blockquote q:before {content: '‘'; content: open-quote;} blockquote q:after {content: '’'; content: close-quote;} blockquote q q:before {content: '“'; content: open-quote;} blockquote q q:after {content: '”'; content: close-quote;} /* blockquote hanging opening quote */ blockquote:before {display: block; height: 0; content: "“"; margin-left: -.95em; font: italic 400%/1 Cochin,Georgia,"Times New Roman",serif; color: #999;} A more traditional English <blockquote> style uses an opening quote character before each paragraph of the quotation and a closing quote character on the last paragraph. You can do that with this CSS, but you’ll need to use <p> for the <blockquote> ’s content. /* alternative blockquote style */ blockquote {quotes: '“' '”';} blockquote p:before {content: '“'; content: open-quote;} blockquote p:after {content: ''; content: no-close-quote;} blockquote p:last-child:after {content: '”'; content: close-quote;} Most languages alternate between two kinds of punctuation as quotes are nested, such as “” and ‘’ in English. To specify nested quote pairs in CSS, we would write this:Unfortunately, browsers use the last quote pair in theproperty for more deeply nested quotations.Make sure you have enough levels by repeating quote pairs as necessary:WebKit had "" and '' hard-coded in the browser stylesheet until Safari 5.1 and Chrome 11, which preventedandfrom working. The workaround is to define opening and closing punctuation manually , then override withand. While it’s a little more involved, that’s why we use this CSS on HTML5 Doctor:A more traditional Englishstyle uses an opening quote character before each paragraph of the quotation and a closing quote character on the last paragraph. You can do that with this CSS, but you’ll need to usefor the’s content. When quoting a foreign language, we use the quotation marks of the surrounding language, so a Japanese quote in an English sentence still uses English quotation marks: All he knows how to say in Japanese is 「わかりません」 “わかりません” (I don’t understand). If you’re dealing with multilingual content, you can specify the quotes property per-language: /* quotes for French, German (two kinds) and Japanese */ :lang(fr) > q {quotes: '« ' ' »' '“' '”';} :lang(de) > q {quotes: '„' '“' '‚' '‘';} :lang(de) > q {quotes: '»' '«' '›' '‹';} /* alternative style */ :lang(ja) > q {quotes: '「' '」' '『' '』';} You can learn more about this CSS in the specification: <cite> is up next. If you’re dealing with multilingual content, you can specify theproperty per-language:You can learn more about this CSS in the specification: CSS Generated Content Module Level 3 . Okay, it’s time to put the rubber gloves on:is up next.

All together now # Oay, let’s start mixing things up on the operating table and show some examples of <cite> with <blockquote> and <q> : A movie <blockquote> with <cite> : <blockquote> <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p> <footer>— Crazy hunch-backed old guy in <cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite></footer> </blockquote> You know the golden rule, don’t you boy? Those who have the gold make the rules. — Crazy hunch-backed old guy in Aladdin Adding the cite attribute to a <blockquote> (and its <footer> ): <blockquote cite="http://www.imdb.com/character/ch0000672/quotes"> <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p> <footer>— <a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy</a> in <cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite></footer> </blockquote> You know the golden rule, don’t you boy? Those who have the gold make the rules. — Crazy hunch-backed old guy in Aladdin A quote from a specification: <p>I wonder if feedback on <code><cite></code> prompted this:</p> <blockquote><p>A person's name is not the title of a work — even if people call that person a piece of work</p> <footer><cite><a href="http://developers.whatwg.org/text-level-semantics.html#the-cite-element">HTML5 for Web Developers</a></cite></footer> </blockquote> I wonder if feedback on <cite> prompted this: A person's name is not the title of a work — even if people call that person a piece of work — HTML5 for Web Developers An academic-style journal citation: <ol> <li>The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). <cite>Journal of Experimental Psychology</cite>, volume 47, number 6, June 1954, pp. 381–391</li> </ol> The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). Journal of Experimental Psychology , volume 47, number 6, June 1954, pp. 381–391 An academic-style book citation: <blockquote> <p>Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication.</p> <footer><cite><a href="http://www.chicagomanualofstyle.org/">The Chicago Manual of Style</a></cite>, 15th Edition (Chicago: University of Chicago Press, 2003), 596</footer> </blockquote> Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication. — The Chicago Manual of Style , 15th Edition (Chicago: University of Chicago Press, 2003), 596 Oay, let’s start mixing things up on the operating table and show some examples ofwithand

Conclusion # If you’ve made it this far, congratulations! You’ve now learned more about citing and quoting in HTML5 than you wanted to know ;) But don’t keep the knowledge to yourself — let us know in the comments what you think. We’d also love to hear how you’re using <blockquote> , <q> , and <cite> in HTML5. If you share your code snippets, remember to escape them! If you’ve made it this far, congratulations! You’ve now learned more about citing and quoting in HTML5 than you wanted to know ;) But don’t keep the knowledge to yourself — let us know in the comments what you think. We’d also love to hear how you’re using, andin HTML5. If you share your code snippets, remember to escape them!

Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elementsand, with their optionalattribute. In addition, there’s theelement, which over the last nine years went from ‘semantic orphan element made good’ to one of the more contentious elements in HTML5. Let’s power up the endoscope and examine the scarring, starting with