SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about semantics in a DL

    I'm putting some taxonomical terms in a list, together with a label of "tags", which I think would be best marked up in a definition list. The default output from the CMS (Drupal) is divs, so almost anything would be more meaningful.

    But I'm not sure which order it should take. Would you say that "tags" is the definition and the categories are the terms to be defined? This makes more sense to me because "tags" describes the categories; not vice versa.

    I might be over-thinking this a bit, but just put it down to curiosity as much as anything.

    HTML Code:
    <dl>
    <dd>Tags</dd>
    <dt>foo</dt>
    <dt>bar</dt>
    </dl>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,804
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You look to have the <dd> and <dt> backwards.

    A <dt> is effectively a "heading" for one or more <dd>s.

    The default display of a <dl> has the <dt> in a larger font and the <dd> indented.
    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="^$">

  3. #3
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    According to my reading of the spec, the order would not matter here. And it seems as valid to have one dd for more than one dt as it is to have one dt with more than one dd. For instance; blue and red (dt) are colours (dd).

    My arrangement was deliberate, with one eye on simpler styling/position (just make them inline) and one on reading order.

  4. #4
    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)
    While it's true that the DTD allows a dd to appear in a dl before the first dt, it is semantically incorrect. A traditional dl should contain 1-n groups, each of which should contain 1-n dts with a term, followed by 1-n dds which define the preceeding [/samp]dt[/samp]s in that group. When a dt follows a dd, it means that a new term is now being defined.

    Also see http://www.w3.org/WAI/GL/WCAG20/WD-W...TECHS/H40.html

    Note, that a dl is not strictly intended for objective definitions of words. Rather, the dd is an elaboration on the dt.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with the others - semantically a <dt> should appear before its <dd> given that

    dt = Definition Term

    dd = Definition Description

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It not so much the order as it is the SEMANTICS. A DT can correspond to multiple DDs or vice versa. you have to decide what you mean. HOWEVER, the DT comes first. Thing of it as a "faux list heading" only one level deep. Any DD under a DT( or group of DTs) will be assume to belong to that DT untill the next DT is reached.

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The DT appears first because it is essentially the defining instance of the 'term' in question it defines the object the author is describing when it appears in a linear flow and the DD is loosely a description of the term hence comes later.

  8. #8
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the last 4 posts say exactly the same thing

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It's like when someone asks how to make a popup :)

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    We were just covering all possible bases to make sure it was clear why the DT logically appears first in the markup. Plus as to why popup windows should only be created via client-side scripting and not markup attributes.

  11. #11
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We were just covering all possible bases...
    Apart from the fact that, in a group effort to be right, you all missed the main part of my query and failed to answer it. Never mind.

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Since the original code example is backwards way around regarding DT and DD that is probably why it didn't get answered how you expected. Perhaps a real example with the actual content might make it easier to visualise. Usually a heading many times is more than apt in many scenarios since DL gets regularly abused just because there is a loose association - as for Drupal I cannot help you there.

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I will take another stab at this...

    IF "Tags" is your only label.. then maybe that what got every one confused.

    These are the possible TWO answers:

    #1) Assuming you intend to explain what each "tag" is:
    <hx> Tabs</hx>
    <dl>
    <dt>foo</dt>
    <dd> The definition for foo would go here. DD can contain any other tags you need, including DIVs and Ps</dd>
    <dd>Alternate definition, if needed</dd>
    <dd>Yet another alternate definition, if needed</dd>
    <dt>bar</dt>
    <dd> The definion for bar would go here.</dd>
    <dt>Etc</dt>
    <dd> The definion for etc would go here.</dd>
    </dl>

    #2) Assuming you DO NOT intend to explain what each tab is:
    The really its just a regular old list with a header is the proper semantic to use.
    <hx> Tags<hx>
    <ul>
    <li>foo</li>
    <li>bar</li>
    </ul>

    So I guess, my answer to your question is the LABEL of a list in not part of the list. it is in fact a SEPARATE header. Hope I was closer this time.

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The whole concept of "tags" makes zero sense to me. I'm pretty sure I've seen them... on Flickr etc. They don't seem to mean anything, have no relation to the image usually, so they just confuse me. Very likely something hip and awesome and I'm too old and stupid to figure it out.

  15. #15
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It isn't semantic to use a definition list for tags anyway. Tags are not definitions. What you've described is essentially an unordered list with a heading. @dresden_phoenix has hit the nail on the head.


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
  •