What to use to quote?

[jjshell]

Hello,

I'm confused about <q>, <cite>, <blockquote>.

Especially after reading that article: Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute | HTML5 Doctor (which is great, by the way).

Here's what I want to do:

I heard someone speak at a conference. I'd like to use a couple of sentences for the opening of an article (rights have been granted), as if a prelude.

Which tag would I use? I would go for <blockquote>, but I just wanna make sure.

Regards,

-jj.

[Stevie D]

<blockquote> is for quoting a block of text, and it is a block level element. In other words, it will be separated from the paragraphs before and after. (It can't contain text directly, either, you have to use a <p> or some other element inside it.)

<q> is for quoting text within a paragraph or other block, and it is an inline element. In other words, it can't exist as a stand-alone section, only within another container.

It depends on how you're setting out your page as to whether you want the quote to stand out or to be integrated into the rest of the text.

[felgall]

The <blockquote> tag is for longer quotes where you display the quote as a separate block offset from the rest of the text. Shorter inline quotes go in the <q> tag.

The <cite> tag is used with either of the above to identify where the quote comes from.

[deathshadow60]

Lemme put it this way:

CITE and Q are for inside a normal sentence:

<p>
  As <cite>General George S. Patton</cite> often said,
  <q>Do not tell a man how to do a job. Tell him to get it
  done and let him impress you with his ingenuity.</q>
</p>

A normal quote inside a sentence uses inline elements. Blockquote is for when you have a... well, block quote.

<blockquote cite="http://www.pattonhq.com/speech.html">
  <p>
    When I want my men to remember something important, to
    really make it stick, I give it to them double dirty. It may not
    sound nice to some bunch of little old ladies at an afternoon tea
    party, but it helps my soldiers to remember. You can't run an
    army without profanity; and it has to be eloquent profanity. An
    army without profanity couldn't fight it's way out of a 
    piss-soaked paper bag.
  </p><p>
    As for the types of comments I make -- Sometimes I just, 
    By God, get carried away with my own eloquence.
  </p><p>
    -- <cite>General George S. Patton Jr.</cite>
  </p>
</blockquote>

See the difference? Threw a CITE attribute on the blockquote so you can see the difference between the attribute and the tag. As an attribute it's optional -- you can use it on Q or BLOCKQUOTE, and it should be a URL... unlike the CITE tag, which should be text saying who/what you are citing with said quote... AND can be used on it's own when you are repeating information from a source without PRECISELY quoting it.

<p>
  As reported in the <cite>Nashua Telegraph</cite> a 47 year old
  Manchester man was arrested public indecency for hiding in the 
  Cess-pit underneath public outhouses at various state parks.
</p>

Citing the source WITHOUT a direct quote. Ideally I'd put a anchor inside the cite on this last one pointing to the original article.

[jjshell]

Thank you, guys.

d60: thank you so much for having taken the time to give me such a detailed explanation. Everything's all clear now. You rock. And I think you've made yours Patton's technique.

[jjshell]

Two more questions:

1) Does the cite tag have to follow the blockquote tag immediately, or can it be separated by some other pieces of content (no examples to provide, just in theory)?

2) Can the cite tag precede the blockquote, and be surrounded by other tags? (<span>, <h2> etc...)

Regards,

-jj.

[Stevie D]

The <cite> tag marks up a citation, ie another source referred to in your text. That should be as close as possible to the <blockquote> it refers to (if it even refers to one), but it isn't a programmatic relationship, you can use whatever structure works for you.

The cite="..." attribute in a <blockquote> tag can also be used to give a source URL for the quote. Although I'm not sure that there is any user-agent out there that does anything with it!

[C. Ankerstjerne]

Stevie
Perhaps not, but it can still be used for cool add-on effects, e.g:

blockquote:before {
 background-color: #ddd;
 box-shadow: 2px 2px #666;
 content: attr(cite);
 float: right;
 font-style: italic;
 margin: 2px;
 padding: 2px 4px;
}

[mikey81]

Here's the simplest way to explain those three HTML tags

<q> is used for writing short quotations.

<cite> is used for references to books, websites, etc (a bit like when your doing a school assignment and quoting a source).

<blockquote> is used for long quotations.

[Stomme poes]

Cite is pretty confusing on its own. It's more confusing within the HTML5 spec, where they've declared (for now) that cite tags may ONLY have titles of works in them. Nothing else.

No authors, artists, dates, or anything else. Titles of works only.

Why they would do this but then not find other tags for the other stuff, I dunno. Please leave your sense of logic (and semantics and anything else) at the door please.

[couponsitescript]

I would go with <q> tag ... but doesn't "..." do it?
Or just write the phrase and at the end - by author?

[deathshadow60]

I would go with <q> tag

Browser support for it is still poor... so it's not always used -- though it's gotten better since we no longer care about NN4 or IE5; it is also styled inconsistently cross-browser so many people either won't use it, or add it to their "reset".

It's in my list of "They're wasting time implementing HTML 5 when they don't even have HTML 4 implemented yet?"

... but doesn't "..." do it?
Or just write the phrase and at the end - by author?

Then search engines, screen readers, and other non-"screen" targets treat said text as no different.

Again, semantic markup -- saying what things ARE, not what they look like... though it is often handy to have a hook to apply styling to indicate it is different for all media targets. Another reason you are much more likely to see BLOCKQUOTE than Q... see a quote box on a forums for example. Though many forums still have their heads wedged up 1997's backside and go "la-la-la-la" so far as 2000 to 2010 is concerned -- just like HTML 5 does.

[gary.turner]

In English, a block quote would have opening quotation marks at the beginning of each paragraph, and a closing quotation mark at the end of the last paragraph. Modern typographical convention calls for the opening quote marks to be outdented. The text-indent: property lets us do the outdent easily. Unless you want to add the quotes manually, we can use pseudo elements and classes from css. That will work for modern browsers. So, what about older IEs? My attitude in this case is forget IE. The block indention sets aside the quote sufficiently, and the <blockquote> tag should set it out for screen readers.

We can properly quote the text in modern graphic browsers by adding a bit of css style rules.

blockquote p {
  text-indent: -.5em;         /*value equals approximate
                                width of quote-mark face*/
  }

blockquote p:before {
  content: open-quote;
  }

blockquote p:after {
  content: close-quote;       /*we have to close each paragraph
                                else following quotes would all
                                be inner quotes*/
  visibility: hidden;         /*so we hide them until the last
                                paragraph*/
  }

blockquote p:last-child:after,
blockquote p.last-p:after {   /*belt and suspenders; use a class on last p 
                                for older Opera and chrome*/
  visibility: visible;
  }

cheers,

gary

[jjshell]

Thank you. Very helpful.

Would it be ok not to display quotes? Or would that be a crucial mistake in the design of a website?

[gary.turner]

Not at all crucial. It is only important that the block quote be differentiated from the rest of the text. The default side margins for blockquote are derived from the print convention of setting the quoted text in from the page margin to allow room for the quote marks.

cheers,

gary

[deathshadow60]

In English, a block quote would have opening quotation marks at the beginning of each paragraph, and a closing quotation mark at the end of the last paragraph.

Key word there is ENGLISH, which is why they should NOT be automatically added. Besides, as characters and language syntax quotes SHOULD be in the markup as CDATA!

What you have there is like adding periods automatically to a paragraph or dollar signs automatically to numbers using CSS -- nonsensical at best, grammatically incorrect at worst.

[Smarty123]

1)<blockquote> tag is used for put the long text in quotes form.
2)<q> tag is used for put the short text in quotes form.
3)<cite> tag defines citation.

[gary.turner]

Key word there is ENGLISH, which is why they should NOT be automatically added.

??? The applied quote marks are language dependent. The browser automagically uses the symbols/glyphs appropriate to the page's language. If the usage is not appropriate to the page language, use a different convention.

Besides, as characters and language syntax quotes SHOULD be in the markup as CDATA!

What you have there is like adding periods automatically to a paragraph or dollar signs automatically to numbers using CSS -- nonsensical at best, grammatically incorrect at worst.

This is a typographic convention. Originally, quoted text was not marked at all. It was sufficient to say who was speaking and what he said. In the Baroque period printers began adding marks, quote marks if you like, to the beginning of each printed line of the quoted text. By the Renaissance, printers began removing the marks, but leaving the space. From that we have both the conventions of indenting block quotes and the one I described above. Do you have issues with the indention being in the presentation layer? Using quotes as above is only a different typographical convention and both may be used. Neither are structural in nature.

You have previously made the point strongly that typography belongs in the presentation layer. Now you say it belongs in the structural layer. Make up your mind, Jason.

[deathshadow60]

This is a typographic convention.

Such typographical decisions were made by the printer based on their time and limitations of the hardware -- NOT the proper conventions of the language. It's like text printed as ascii7 -- oft made are the sacrifices of the time...

This is where we differ on the attitude -- I'm basing on written grammar per the Philadelphia standard as one would expect to be taught in high school or even grade school English, you're basing on the history of typography... which frankly has a very poor history of following the rules of grammar and syntax.

Kinda like HTML coders...

[gary.turner]

Note. We recommend that style sheet implementations provide a mechanism
for inserting quotation marks before and after a quotation delimited by
BLOCKQUOTE in a manner appropriate to the current language context and
the degree of nesting of quotations.

Earlier in the same section, there was this:

Visual user agents must ensure that the content of the Q element is
rendered with delimiting quotation marks. Authors should not put
quotation marks at the beginning and end of the content of a Q element.

User agents should render quotation marks in a language-sensitive
manner (see the lang attribute). Many languages adopt different
quotation styles for outer and inner (nested) quotations, which should
be respected by user-agents.

My suggestion is consistent with W3 recommendations.

Don't be obtuse, Jason. Grammar is about how language is used. Typography is about how it is rendered. There are bits of overlap simply because many typographical conventions have been adopted by grammarians. Even your beloved paragraph is a typographical construct. Typesetters, and that includes the olden monk scriveners, began marking changes of voice, topic, tenor, &c. to make reading easier. The pilcrow (¶) was the symbol used to mark the change. Then came a line break before the symbol, then the symbol was removed leaving the familiar line indent. And so, we have paragraphs as typographic artifacts.

Grammar and typography are not mutually exclusive. They each have a part in the finished product. Typography is the area of decision making when you decide, for example, how to render a heading; font size, font family, weight, flush left, flush right, centered, etc. How will you display a menu? Oh, and the blockquote? Indented, italicized, use quote marks, other, all of the above? Parenthetically, I read a lot of research papers, and block quotes are ubiquitous. I think I've seen every possible method of setting the quoted text apart; indented, quote marks, italics, bold, smaller fonts, different font families, and any and every combination. None had jack to do with grammar, and everything to do with typography. The important issue is whether the quoted text is identifiable as separate from the authors' text. All of the methods do the required job, though some are less than æsthetically pleasing.

Or, do you not use style sheets?

[deathshadow60]

Or, do you not use style sheets?

That question brings up the perfect counterpoint to your entire post - as it begs the question:

Do you not practice graceful degradation?

Content should be able to stand on it's own WITHOUT the stylesheet -- it's why I write my semantic markup before I even THINK about the CSS and my pages are usable without it. While I certainly do use stylesheets, a page should retain it's usability and content WITHOUT them.

Which is another reason to put them in the content, not the stylesheet.

Of course, you omitted that user agents should NOT automatically insert them - at which point that recommendation about doing it with generated content seems silly.

If the CONTENT is supposed to have them, put them in the content NOT the style... That's just common sense.

But then, don't look for common sense in the HTML specifications, especially anything that's informative and not normative. (hence the green and italics on those sections)

Honestly, it's one of the parts of the spec that is another case of taking something simple, and making it needlessly annoyingly complex. It's punctuation -- why on earth would you put proper punctuation anywhere BUT the content? Again, that's like putting periods, dollar signs, question marks in the CSS.

<strong class="exclaim">I can see it now</strong> <em class="question">Does the notion of entire paragraphs without punctuation <strong>REALLY</strong> seem like a good idea</em> <span class="normal">Sounds like it would just be a giant run-on at that point</span>

To me, that's what adding quotes using CSS is.

[gary.turner]

That question brings up the perfect counterpoint to your entire post - as it begs the question:

Do you not practice graceful degradation?

Red herring? That has nothing to do with this conversation.

Content should be able to stand on it's own WITHOUT the stylesheet -- it's why I write my semantic markup before I even THINK about the CSS and my pages are usable without it. While I certainly do use stylesheets, a page should retain it's usability and content WITHOUT them.

Which is another reason to put them in the content, not the stylesheet.

You mean quotation marks? There is no issue. All major browsers plus Lynx have default handling of Q and BLOCKQUOTE that clearly delimit quoted text. If you want a different rendering it is up to you to provide the typography via the style sheet.

Of course, you omitted that user agents should NOT automatically insert them - at which point that recommendation about doing it with generated content seems silly.

If the CONTENT is supposed to have them, put them in the content NOT the style... That's just common sense.

Quotation marks are neither punctuation nor content. They are typographic delimiters. Our structural markup language, html, provides two tags for setting out quoted text.

But then, don't look for common sense in the HTML specifications, especially anything that's informative and not normative. (hence the green and italics on those sections)

That's on the blockquote section, probably because there are multiple means of delimiting block quotes in common use. The section on Q is not italicized nor is it painted green.

Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element.

User agents should render quotation marks in a language-sensitive manner (see the lang attribute). Many languages adopt different quotation styles for outer and inner (nested) quotations, which should be respected by user-agents.

All four of the major graphic rendering engines insert the language dependent quotation marks, as does Lynx.

Honestly, it's one of the parts of the spec that is another case of taking something simple, and making it needlessly annoyingly complex. It's punctuation -- why on earth would you put proper punctuation anywhere BUT the content? Again, that's like putting periods, dollar signs, question marks in the CSS.

No, they're typographic delimiters. Periods, and query marks are punctuation; big difference. The currency symbols are content.

<strong class="exclaim">I can see it now</strong> <em class="question">Does the notion of entire paragraphs without punctuation <strong>REALLY</strong> seem like a good idea</em> <span class="normal">Sounds like it would just be a giant run-on at that point</span>

And until type setters began marking paragraphs and quotes, text was just one big run-on.

Jason, you are being purposely obtuse to the point of having become dull, so I'm done.

[deathshadow60]

No, they're typographic delimiters. Periods, and query marks are punctuation; big difference.

Tell that to an English teacher and prepare to be laughed out of the room.

"Of course," he said with snarky sarcasm "quotes are typographical and aren't punctuation."

http://www.grammarbook.com/punctuation/quotes.asp

Good book BTW.

[Black Max]

Well, I am an English teacher, and I'll give you a weaselly answer: you're both right. Quotation marks are absolutely punctuation marks, and have been so since dinosaurs taught Fred and Wilma. However, they also serve a purpose as typographic delimiters, especially when you're coding in HTML (and presumably other languages, though I can't speak to those).

[gary.turner]

… and have been so since dinosaurs taught Fred and Wilma.

I might quibble with that. Quote marks were not used until the Baroque period. I would also argue that quote marks have no oral/aural purpose. Compare to the period, comma, semi-colon and colon, all of which have oral effects. Even the en dash, used where a range of values is indicated, e.g. Jan.–Mar., is usually verbalized as through or to, January through March. Others are partly grammatical and partly rhetorical, the interrogative, exclamation, parentheses, brackets, em dash and horizontal ellipsis (called low dots by typesetters).

The quote marks' only purpose is to provide visual separation within written/printed text. There is no oral effect. Try it and see: Jane said "Jack will be late". The comma was left out so the quoted text could be treated as non-verbatim. With or without marks, the oral rendering is unchanged. Additionally, using quote marks is only one of many options available for that purpose. Typewriters, manuscripts (other than illuminated) and pre-GUI computers had to rely on the quote mark, but typesetters, for both print and computer, have a wide variety of delimiters. Using a structural markup language does not mean the quoted text is not pointed. HTML provides the q and blockquote tags to mark quoted text. LaΤεΧ, a typesetting markup language application does the same,

\begin{quote}text\end{quote}

It is up to the macro (LaΤεΧ) or the stylesheet (html) to define the rendering.

cheers,

gary