SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What to use to quote?

    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.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    <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.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Lemme put it this way:

    CITE and Q are for inside a normal sentence:
    Code:
    <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.

    Code:
    <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.

    Code:
    <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.

  5. #5
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  6. #6
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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!

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Stevie
    Perhaps not, but it can still be used for cool add-on effects, e.g:

    Code css:
    blockquote:before {
     background-color: #ddd;
     box-shadow: 2px 2px #666;
     content: attr(cite);
     float: right;
     font-style: italic;
     margin: 2px;
     padding: 2px 4px;
    }
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Canberra
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  11. #11
    Non-Member
    Join Date
    Nov 2010
    Posts
    174
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I would go with <q> tag ... but doesn't "..." do it?
    Or just write the phrase and at the end - by author?

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by couponsitescript View Post
    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?"

    Quote Originally Posted by couponsitescript View Post
    ... 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.

  13. #13
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  14. #14
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


  15. #15
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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.

  17. #17
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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...

  20. #20
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by §9.2.2 Quotations: The BLOCKQUOTE and Q elements
    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?
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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.

  22. #22
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    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.

  24. #24
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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).

  25. #25
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max
    … 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,
    Code:
    \begin{quote}text\end{quote}
    It is up to the macro (LaΤεΧ) or the stylesheet (html) to define the rendering.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •