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. 
<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.
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.
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.
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. 
Two more questions:
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)?
Can the cite tag precede the blockquote, and be surrounded by other tags? (<span>, <h2> etc…)
Regards,
-jj.
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!
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;
}
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.
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.
I would go with <q> tag … but doesn’t “…” do it?
Or just write the phrase and at the end - by author?
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?”
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.
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
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?
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
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.
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.
??? 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.
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…
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?