SitePoint Sponsor

User Tag List

Results 1 to 25 of 25

Hybrid View

  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,825
    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,278
    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
    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.

  15. #15
    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.

  16. #16
    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

  17. #17
    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?


  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)
    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

  19. #19
    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).

  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 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
  •