SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    semantic timeline in html

    Has anyone done this and if so how?

  2. #2
    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)
    This would be my suggestion - it's also ISO 8601 compliant:
    HTML Code:
    <dl>
      <dt>1939-09-01</dt>
        <dd>Germany invades Poland</dd>
      <dt>1940-04-09</dt>
        <dd>Germany invades Denmark</dd>
        <dd>Germany invades Norway</dd>
        <dd>Denmark surrenders to German forces</dd>
    </dl>
    I love definition lists, but for some reason, very few people use them.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    I love definition lists, but for some reason, very few people use them.
    Maybe because there's very few opportunities to use them within the correct semantic context. A definition list is to provide definitions for a list of terms. In your example, 'Germany invades Poland' is not a definition of Sept 1, 1939. I have seen DLs used for a number of different purposes though so wonder if their use is more open to interpretation than the specs seem to suggest.

  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)
    Quote Originally Posted by Tyssen
    A definition list is to provide definitions for a list of terms. In your example, 'Germany invades Poland' is not a definition of Sept 1, 1939. I have seen DLs used for a number of different purposes though so wonder if their use is more open to interpretation than the specs seem to suggest.
    The specification for a definition list does not limit its use to strictly a list of definitions of terms. A definition list merely signifies parent-child relationship between the DT and DD. Check the W3C specifications for definition lists.

    Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
    [...]
    Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
    <http://www.w3.org/TR/html4/struct/lists.html>
    My emphasis
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    A definition list merely signifies parent-child relationship between the DT and DD.
    Actually, that's incorrect. The DT and DD are adjacent siblings; the relationship is merely contextual (just like with, e.g., an H2 and the content that follows).

    If there was a parent-child relationship, the syntax would be as follows:
    Code:
    <dl>
      <dt>
        Title
        <dd>Definition</dd>
      </dt>
      ...
    </dl>
    The semantics of definition lists seem to have migrated towards a general pair-relationship list, as you say. Such a list is definitely something that's been lacking in HTML, but as a result the element type names are now rather confusing. They should be PL (paired list), PK (pair key) and PV (pair value), or something like that.
    Birnam wood is come to Dunsinane

  6. #6
    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)
    Actually, that's incorrect. The DT and DD are adjacent siblings; the relationship is merely contextual (just like with, e.g., an H2 and the content that follows).
    I stand corrected.

    I also agree that the name is confusing, however I feel it would create more problems than it would solve if W3C changed the name of the tag. Likewise, you could say that noone really uses 'anchor' to describe a link anymore.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't suggest that the existing element types be renamed; rather that a paired list were added to the spec. Of course it would probably be 10 years before Microsoft included support for something like that.

    Although the term 'anchor' may not be used much these days, it's still a correct term: one anchorpoint of a hypertext link. (Besides, <link> is already taken.)
    Birnam wood is come to Dunsinane

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    ...noone really uses 'anchor' to describe a link anymore.
    i sure hope not -- an anchor looks like this: <a name="here"></a> (it's not a link)

    Code:
    <ul>
      <li>1939-09-01
          <ul>
            <li>Germany invades Poland</li>
          </ul>
      </li>
      <li>1940-04-09
          <ul>
            <li>Germany invades Denmark</li>
            <li>Germany invades Norway</li>
            <li>Denmark surrenders to German forces</li>
          </ul>
      </li>    
    </ul>
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    Check the W3C specifications for definition lists.
    I was just reading it on the w/e funnily enough but stopped just before the line you've quoted. I always do that though - there's a whole world of last sentences out there I never read.

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    i sure hope not -- an anchor looks like this: <a name="here"></a> (it's not a link)
    Anchor refers to anything with <a ...> in it; not just internal links.

    From the W3C:

    A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

  11. #11
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is probably how I would do it:

    HTML Code:
    <ol>
        <li>
      <abbr class="dtstart" title="1939-09-01">September 1st 1939</abbr>
      Germany invades Poland
     </li>
        <li>
      <abbr class="dtstart" title="1940-04-09">April 9th 1940</abbr>
      Germany invades Denmark
     </li>
      </ol>

  12. #12
    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)
    Tommy
    On the other hand, that would create two tags which would more or less be the same in concept, and where the the new PL tag would cover the use of the DL completely.
    While I, in theory, would support your idea, I'm not sure it'd be a good idea to implement in reality. I doubt that W3C would go for it, either, considering they killed the MENU tag.

    r937
    It's still the same tag which is used for the purpose.

    Your code example doesn't make sense, though, since you're using an unordered list to represent a timeline, which by definition is ordered (so if you were to insist on your approach, you'd have to use an ordered list).
    Using a definition list for a time line is within the scope of the proper application of the tag, though, as per the quote above, and contains less code than your example.

    momos
    If you are retrieving the dates from a database, especially a MySQL one, it'll decrease the database size and parsing time by using the long ISO 8601 format (YYYY-MM-DD), since this is the native date format of MySQL. Another advantage is that it's easy to sort the dates this way, since the proper sequence will be obtained by a simple descend-sorting.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  13. #13
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    momos, September 1st 1939 is not an abbreviation for 1939-09-01

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

  14. #14
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    ... you're using an unordered list to represent a timeline, which by definition is ordered (so if you were to insist on your approach, you'd have to use an ordered list).
    i am not going to insist, and of course you are right, i should've used OL for the outer list

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

  15. #15
    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 r937
    momos, September 1st 1939 is not an abbreviation for 1939-09-01

    It's more like a definition, really
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  16. #16
    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)
    HTML Code:
    <ol>
      <li>
        <dl>
          <dt>1939-09-01</dt>
            <dd>The ninth day in the ninth month, in the year of 1939 
              <dl>
                <dt>AD</dt>
                  <dd>
                    <dl>
                      <dt>Anno Domini</dt>
                        <dd>Latin, &quot;in the year of our Lord&quot;, in the west the common start of the calender</dd>
                    </dl>
                  </dd>
              </dl>
            </dd>
        </dl>
        <ul>
          <li>Germany invades Poland</li>
        </ul>
      </li>
    </ol>
    Expand ad infinitum with more DLs
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  17. #17
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r937: I know, but I'm using microformats-design-patterns, because they are widely used already and easy interpretable by machines (http://microformats.org/wiki/datetime-design-pattern)

  18. #18
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by momos
    r937: I know, but I'm using microformats-design-patterns, because they are widely used already and easy interpretable by machines (http://microformats.org/wiki/datetime-design-pattern)
    i think you got your abbreviation and human-friendly representation backwards then
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  19. #19
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy, I'm really interrested in your ideas around this, in other words how would you mark-it-up?

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    On the other hand, that would create two tags which would more or less be the same in concept, and where the the new PL tag would cover the use of the DL completely.
    Not at all. The DL could then be used exclusively for definitions, for which there is a legitimate need for semantic markup (ever tried define: in Google?). PL, meanwhile, could be used for lists of paired values that are not definitions. They wouldn't overlap any more than DIV and P overlap.

    Having said that, I don't think it will ever be implemented either.

    Quote Originally Posted by momos
    Tommy, I'm really interrested in your ideas around this, in other words how would you mark-it-up?
    I honestly don't know. I've had hour-long discussions with a trusted and knowledgeable friend in the UK about the most semantic way to mark up lists of value pairs. He was all for definition lists, but I was reluctant.

    I've thought about this many times since then, and I have a feeling that Christian's approach is the only reasonable way forward. We may have to accept that the semantics of DL have degenerated into oblivion.

    Some screen readers (IIRC) say 'equals' between the DT and the DD. My philosophy has heretofore been that if I can live with that, I'd use a DL. In the case of a timeline I'm not sure, but it's not like there's all that much to choose from.

    An ordered list, perhaps, but you'll then be in a quandry as to how to mark up the date. A heading?

    I think that I would go with a DL, however reluctantly.
    Birnam wood is come to Dunsinane

  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)
    Muhaha! Welcome to the Dark Side, Tommy!
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  22. #22
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    am i the only one that looked at the thread starter and thought "ah, a table would do it nicely"? strange...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  23. #23
    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)
    I don't see how a table would be semantical in this matter.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  24. #24
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's really strange that such a simple pattern can not be solved nicely in HTML, not even XHTML 2 is comming up with a solution

  25. #25
    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)
    It was solved, by the definition list I posted. My example can of course be expanded on as necessary.
    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
  •