Css Essay Quotations

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

Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accommodated in the elements and , with their optional attribute. In addition, there’s the element, 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 .

Quoting with #

We’ve become pretty familiar with here, as most of our articles feature excerpts from the HTML5 specification. Look, here’s one right now:
The element represents a section that is quoted from another source. — W3C HTML5 specification
Easy peasy, right? Nothing has really changed. Remember that as 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. is a sectioning root, meaning that any - elements it contains don’t become part of the document’s outline. Also, adding a single paragraph of text with no enclosing tags is now completely kosher. Here are some simple examples (apologies for the fake content): Historically, adding the source of a was a semantic conundrum. If you add it as content of the , then semantically it would become part of the quote, right? (and ) have a attribute for the URL of the quote’s source, to provide context. That’s hidden data, however, and despite the potential for exposing the attribute via CSS and/or JS, that’s not as useful as a visible link.

  It seems our long-running convention at HTML5 Doctor of using for attribution inside a is 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 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 for attribution in a isn’t strictly valid, and may not be in the future either. The spec currently recommends including attribution in content surrounding the .

Hixie has given his feedback on my email, and it seems like our citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in . Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet…

HTML5 comes to our rescue with the element, allowing us to add semantically separate information about the quote. For example: Because of this semantically sound way to show the quote’s source, .
Even then, the attribute is probably only worth it if you can automate it (or you're just crazy OCD ;). We’ll return to in a bit, but let’s first probe into .

Inline quotations with #

is for quoting something inline within a section of prose:
The element represents some phrasing content quoted from another source. — W3C HTML5 specification
This means we can’t use 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 elements; they will be inserted into the rendering by the user agent. — W3C HTML5 specification
As with , you can also add a 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 is 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 and #

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.
Default punctuation¹8.0 “” ‘’1.5 “” ‘’2.0 "" 4.0? "" ''1.0? "" ''4.0 “” ‘’
with Unicode escapes8.01.55.1²11.0²4.0³
with glyphs8.01.55.1²11.0²4.0³
  1. Default support requires on and
  2. Webkit support has been weak, with "" and '' hard-coded until Safari 5.1 and Chrome 11. Ref: WebKit bugs 6503 (fixed) and 3234 (new).
  3. Opera is buggy if you nest to a greater depth than quote pairs in your property (test case)
“Correct” punctuation is an intricate topic and varies depending on language, but it generally involves these characters:
GlyphDescriptionUnicode escapeEntityMacWindowsLinux
Left double quotation mark\201C-++
Right double quotation mark\201D--++
Left single quotation mark\2018-+++
Right single quotation mark\2019--+++
«Double left-pointing angle quotation mark\00AB-++
»Double right-pointing angle quotation mark\00BB--++
Single left-pointing angle quotation mark\2039--+-
Single right-pointing angle quotation mark\203A--+-
Double low-9 quotation mark\201E--+-
Single low-9 quotation mark\201A---
Narrow no-break space\202F---

If you’re using the 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 - on Mac, + on Windows, and + 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: Unfortunately, browsers use the last quote pair in the property 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 prevented and from working. The workaround is to define opening and closing punctuation manually, then override with and . While it’s a little more involved, that’s why we use this CSS on HTML5 Doctor: A more traditional English 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 for 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 property 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.

The rise and fall of #

’s rise to stardom as the semantic super-element #

In HTML 2 was . But in HTML 3.2 and HTML 4.01, was more loosely defined as
Cite: Contains a citation or a reference to other sources — HTML 4.01 specification
We can define “citation” as:
  • a reference to authority or precedent,
  • a quotation that’s being cited, or
  • a mention of someone or something
And “a reference to other sources” is even less specific [cue Jaws music]. The HTML 4.01 spec’s examples were:
As Harry S. Truman said… More information can be found in [ISO-0000]
Sadly, an example of an academic-style citation wasn’t included. Some standardistas enthusiastically adopted for its semantics, with the high point being Mark Pilgrim’s epic “Posts by citation” (the results of which are now sadly 404’ed). In those heady days, was used in three main ways:
  1. To refer to a person, generally in connection with some reference or as the source of a quote:
  2. To contain the title of a work being referred to or quoted from :
  3. To contain a full academic-style citation (title plus author, and maybe bibliographic information):
    • Historically this might also be marked up as:
    • or as Wikipedia does (with set to ):
“Wow, what an all-rounder!” I hear you say. “Is there anything can’t do?” The dirty secret of all this is the element has historically been semantics for the sake of semantics. So far, the only non-site-specific application of is browser default stylesheets, which format it with . This is not a bad thing, as using consistently on your own site allows you to do all kinds of fun stuff (as Pilgrim demonstrated). But in the past, it’s been used to refer to three related but quite different types of data: titles, full citations, and names. This makes web-wide use, such as by a search engine, tricky.

snorts too much semantics, checks into rehab #

So, in HTML5 this semantic over-achiever has ended up with a more … prosaic definition:
The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. — even if people call that person a piece of work — — W3C HTML5 specification
This restriction has been somewhat … unpopular. Arguments for using for names (now summarised on the WHATWG wiki) were addressed by Ian Hickson, who decided that historical use wasn’t enough to justify the wooly definition. Jeremy Keith’s 24 Ways article “Incite A Riot” called for civil disobedience and HTML 4.01-style -ing, but the HTML5 spec has not changed. The inrs are irate that there are two use cases that ’s new definition leaves semantically unfilled — to mark up speakers in a transcript or dialog, and to indicate the speaker or author of an inline quote (). The HTML5 spec adds semantic insult to injury by saying:
In some cases, the element might be appropriate for names; e.g. in a gossip article … In other cases, if an element is really needed, the element can be used.
By better defining , we increase the odds of getting usable data from it, though we now need different methods to cover these other uses. For now, it seems that these use cases aren’t specific enough to warrant new elements. Note that was never a general-purpose element for marking up a person. The still-born HTML 3.0 did try to introduce the element, but if you’ve ever used hCard to semantically mark up a person’s name, you’ll know that we’d need way more than just one element to do names justice. The POSH way of marking up a name is to use hCard (in microformats, microdata or RDFa), or just with a plain old link.

Get exd and quote stuff #

History and encouraging angry comments aside, let’s suture up and see some examples of HTML5-style action: In this example, the author and book title are only connected by proximity. You could connect them more explicitly using the hProduct microformat, RDFa’s GoodRelations, or to really bleed on the edge even Schema.org. Note that you can’t use the now-Google-approved attribute here, as George R. R. Martin is being referred to and isn’t writing the article. If you just wanted to style the author’s name, you could use (gossip column style) or with whatever CSS you like.

All together now #

Oay, let’s start mixing things up on the operating table and show some examples of with and :

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 , , and in HTML5. If you share your code snippets, remember to escape them!

Updates #

  1. : It seems our long-running convention at HTML5 Doctor of using for attribution inside a is in keeping with the part of the spec, but not with the part. We’re investigating…
  2. : Hixie confirmed that our use of is currently non-conforming — can currently only be included in if it’s quoted content. However, the phrase “content inside a blockquote must be quoted from another source” also forbids other common changes and additions to block quotes, so I’m going to see if it can be changed.
  3. : I wrote an article problems and solutions about these problems, and initial feedback from Hixie is that there are legitimate issues, and he’ll review feedback via the WHATWG email list. So, please do that! You can also leave feedback in the comments here or ping me on Twitter (@boblet). Also, don’t miss Jeremy Keith’s excellent commentary “Citation needed” on the issue (watch out for those s though ;) )
  4. : I’ve added keyboard shortcuts for punctuation characters to the punctuation table, for default (typically US) keyboards.
  5. Added a note about Hixie’s reply to the article.

Oli Studholme

It sounds painful, but it doesn’t have to be!  Basically, when you use in-text citations, you are telling the reader where you got any and all information that did not come from inside your own head.  This is more obvious when you are directly quoting from a source, but it is also needed when you have summarized or paraphrased from a source and even if you got an idea from somewhere else. 

So how do you do it?  With AMA style, you will use superscript arabic numerals to number each of the sources in your text. The sources are numbered consecutively, and refer to the sources listed on the "References" page at the end of your paper.


The report1 found that...
As has been noted previously,2
This argument was refuted in another study.3
Other reports4,5confirm these findings. (Note: Two sources are cited.)
"...as has been the conclusion of this author."6(Note: Use after direct quotation.)
In recent reports1,3-5,9surgical outcomes have been...(Note: Multiple sources cited; not all are consecutive.)

You may cite the same source more than once by using the same endnote number. However, when you repeat a number, you should include a page number, in parentheses, next to the note number.


The data1(p44) disproves the previous assertion...

Please see the AMA guide at the University of Washington for additional examples.

Categories: 1

0 Replies to “Css Essay Quotations”

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *