SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)

    semantics of tag nesting

    simple example --

    Code:
    <p>blah blah 
    <a href="http://example.com/foo.html">
    <cite>Foo</cite>
    </a> 
    blah blah.</p>
    or
    Code:
    <p>blah blah 
    <cite>
    <a href="http://example.com/foo.html">Foo</a>
    </cite> 
    blah blah.</p>
    which is better, and why?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  2. #2
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just looked it up and it looks like this would be better if you remove the a link bit.

    HTML Code:
    <p>blah blah 
    <cite cite="http://example.com/foo.html">Foo</cite> 
    blah blah.</p>
    looks like a quick way of making a link or this is a third way of using it.

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    "would be better" if i remove the link?

    no

    i want it to be a link
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The whole thing is a citation and this citation happens to be a link, so I'd use your second example. Whether it's better or not is not for me to say, but the second example seems more logical to me.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    vielen dank, maleika ...

    but it would be a citation regardless of whether i make it a link or not, so the first one seems a bit more logical to me...

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It depends on what you want to link - the text in the citation or the citation itself.

    If the citation is padded and bordered, do you want a click on any part of it (be it on the text or 20 px away, depending on your padding etc) to follow the link, or just clicking on the text?

    In this kind of situation, semantics are fine either way. It's the functionality that decides.

    Based on that, I'd choose the second.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    thanks, jake... but really, functionality?

    excuse me, but the whole point of semantic markup is that there shall be no consideration of presentation

    so "clicking on" something that has padding doesn't even enter into the question

    (aside: maybe we might get a hint from the way that the two different versions are handled by a speech reader?)

    also, not to put too philosophical a point on it, the text in the citation is the citation
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're quite right, r937. Put the link inside the cite element. Here's an example of my own usage:
    Code:
    <p><cite>Robert Bringhurst, in <a href="http://www.amazon.com/  "><i>The Elements of Typographic Style</i></a></cite>, has this to say:
    </p>
    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

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    um, gary, two things...

    first, you're missing the opening CITE tag

    and what's with the I (italics)? wouldn't you style the CITE (assuming it required styling that differs from the user agent default)?

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    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 r937 View Post
    um, gary, two things...

    first, you're missing the opening CITE tag
    It's there; look again.

    and what's with the I (italics)? wouldn't you style the CITE (assuming it required styling that differs from the user agent default)?
    It is a typographic convention that book titles be Italicized (formerly, made bold), therefore the <i> tag. It is a non presentational usage that lives within this citation. The cite includes the author's name, because I'm citing the author and book that contains the quoted item. That combination might be iffy, but .

    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

  11. #11
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    yeah, you're right, it is there... and both your CITE and your I tags are misused -- there's no "might" about it being iffy, in my view

    you should be quoting him in a cited work, not citing him in some italicized text

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    vielen dank, maleika ...

    but it would be a citation regardless of whether i make it a link or not, so the first one seems a bit more logical to me...

    Yes, it would be a citation whether you make it a link or not.

    In my simple logic, I'd explain my reasoning for choosing your second method like this:

    The cite element is used to markup a reference or citation of an external source. This citation can be a simple text node or it can be a link to that external source. They are contextually a unit, ergo, whether linked or not, a citation is wrapped in the cite element.

    I don't know. It seems plausible to me, which doesn't mean much. Ha!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  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)
    Clearly, I did not make myself clear. The citation relates the names of the author and his book. The book title is italicized due to typographic convention; the <i> draws its semantic value from the context. Putting the code snippet in context,
    Code:
            <h2>Typography and Verse</h2>
    
            <p><cite>Robert Bringhurst, in <a href="http://www.amazon.com/gp/product/0881792063?ie=UTF8&amp;tag=garturwebdev-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0881792063">
            <i>The Elements of Typographic Style</i></a></cite>, has this
            to say:</p>
    
            <blockquote>
              <p><!--[if lte ie 7]>&ldquo;<![endif]-->Verse is usually set
              flush left and ragged right, and verse quotations within
              prose should not be deprived of their chosen form. But to
              distinguish verse quotations from surrounding prose, they
              should be indented or centered on the longest line. 
              <!--[if lte ie 7]>&rdquo;<![endif]--></p>
            </blockquote>
    I withdraw the "iffy" part of my previous post. From 9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
    CITE: Contains a citation or a reference to other sources.
    Webster has this to say:
    Citation: The act of citing a passage from a book, or from another person, in his own words; also, the passage or words quoted; quotation.
    From that, it is clear that both the book and its author are fair game to be used in the cite element.

    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
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    well, gary, that's nice, but i personally think <cite>ur doing it wrong</cite>

    change it to this --
    Code:
    <h2>Typography and Verse</h2>
    
            <p>Robert Bringhurst, in <a href="http://www.amazon.com/gp/product/0881792063?ie=UTF8&amp;tag=garturwebdev-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0881792063">
            <cite>The Elements of Typographic Style</cite></a>, has this
            to say:</p>
    and now your example is not only semantically stronger, but is rather like my original question -- does the CITE go inside the A, or does the A go inside the CITE?

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  15. #15
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    thanks, jake... but really, functionality?

    excuse me, but the whole point of semantic markup is that there shall be no consideration of presentation
    I know perfectly well what semantics mean. I do all my HTML as Semantic Markup, as such that presentation is irrelevant until I put a design to it, but in a situation like this where it makes no semantic difference, functionality is what you should consider. I didn't say anything about presentation.

    Again, it comes to the question - are you linking the cite itself or just the text inside the <cite />?

    If you want a click anywhere on the <cite /> to follow the link, then your semantics are different - you're linking a <cite />. If you want only the text to link, you're linking the text inside <cite />. The semantics depend on functionality in this situation.

    The differences are both functional, presentational and philosophical.

    Off Topic:

    To be honest, there really isn't any need for that kind of attitude to people trying to help you.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    and now your example is not only semantically stronger...
    You can be allergic to the <i> all you want, but your book titles should be in either italics or underlined (or I suppose bold), because it's a book title and that's what you do with those. I personally dislike the underline because I haven't seen it very often and hated it in bibliographies. But that's what I had to use back when I had the electric typewriter (that was lawlz, it even gave shocks when you touched the sides). I hated backing up each letter and tying the underline. If you hate the <i> then use a <b> : )

    does the CITE go inside the A, or does the A go inside the CITE?
    Were this my text, I'd ask myself: is the url part of the cite? Is it what I'm citing? I think so. So I'd not just wrap the cite around the title but also the url part, which necessitates wrapping the cite around the anchor.

    And with the idea of "clicking a citation", is that different than "clicking a header"? Because a header is a block, you simply aren't allowed to wrap the <a> around it, so the <a> is inside anyway. Even though a cite can validly wrap an anchor OR be a child, I would think it more consistent to keep the a inside the cite. So, <cite><a href="thesource">nameofthesource</a></cite> make sense? Because the way you have it now, the link to the source is not considered part of the source. Unless the link really isn't the source, in which case I'd do what you did, keep the cite around just the title and within the <a>.


    <i>Goodnight, Moon</i>.

    Goodnight, Bear.

  17. #17
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From the W3 example,[code]As <CITE>Harry S. Truman</CITE> said,
    <Q lang="en-us">The buck stops here.</Q>[/quote]Sorry, you're picking at nits that aren't there. In my example, either or both of author and title are legitimate citations. Since I have both, both are used.

    As for the original question, either seems to be valid. Structurally, I would consider cite to be the base element, with the link nested within.

    gary

    //edit: Sp has a better explanation. --gt
    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

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Which goes inside which depends on the answer to one question.

    Is the citation being made a link <a><cite></cite></a> or is the link just plain text that happens to be within a citation <cite><a></a></cite>
    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="^$">

  19. #19
    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)
    Since we're looking at semantics, the solution should be to look at what you are trying to do.

    If you nest the a inside the cite, semantically, you are citing not only the visible text, but the link itself. This makes sense if the URL of the source is an important part of the citation.

    Example
    Code html4strict:
    <p>According to the <cite><a href="http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 DTD</a></cite>, the <code>&lt;cite&gt;</code> element is inline.</p>

    If you nest the cite inside the a, on the other hand, you are semantically making the citation a link. This makes sense if you are referring to a source for what you're writing, but where the link is not an important part of the citation itself.

    Example
    Code html4strict:
    <p><a href="http://en.wikipedia.org/wiki/Gettysburg_Address"><cite>Lincoln's <i>Gettysburg Address</i></cite></a> began with the phrase <q cite="http://en.wikipedia.org/wiki/Gettysburg_Address">Four score and seven years ago</q>.</p>

    That's my take on it anyway.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  20. #20
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    C. Ankerstjerne you're backwards.

    If the citation is a citation without the link, nest it in the <a>, otherwise nest <a> inside <cite>.

    I wouldn't spend a lot of time thinking about it r937, pick what you think is best and run with it.

  21. #21
    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)
    If the citation is a citation without the link, nest it in the <a>, otherwise nest <a> inside <cite>.
    Isn't that what I wrote?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  22. #22
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by arkinstall View Post
    ... but in a situation like this where it makes no semantic difference, functionality is what you should consider
    sorry i took so long to reply to this, jake, but i was out

    and i apologize for anything you might have perceived in my attitude but i assure you i did not mean anything by the way i said what i said -- you're one of the good guys (you too gary )

    anyhow, i understand your point about functionality, but i'm afraid that i still think there ~is~ a semantic difference, i just cannot 'splain it so good

    i'm definitely leaning towards <a href="..."><cite>title</cite></a> though

    thanks to all who replied
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  23. #23
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Isn't that what I wrote?
    Yes - I was agreeing with you.
    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="^$">

  24. #24
    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)
    Quote Originally Posted by felgall View Post
    Yes - I was agreeing with you.
    I was quoting bals28mjk's response to my post (but thanks ).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


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
  •