SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    whats is a UL/OL for?

    I am writing a PHP web util. one of it MANY functions will be to automate the general purpose building of lists ( for use as lists, content synapses, menus, etc)
    It struck me that I could add a header option as well... ( for example a Navigation list could say "MENU" at the beginning...)

    But I wondered where would be the semantically correct way to do do this?

    I could make a <hx>Menu<hx> outside the UL.. but wouldnt that mean the header doesn't NOT belong to the list?

    I also thought about putting the <hx> WITHIN the UL/OLs, after all isnt that what that block level of the list is for?

    Thinking about this again, I thought that I wouldn't even need the hx tags if I put "Menu" within the UL/OLs

    about now , I had developed a headache... ;/ but I thought that I may need something to help with possible styling... so maybeit should be : "<uL><span>Menu</span>..."


    I would love to get some opinions on which way you code your lists....

  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)
    A header tag is a header for any contents below the header tag, until a header tag of the same or a higher level is reached. Just like a header tag above a paragraph tag is the header for that paragraph, a header above a list tag is the header for that list. Therefore, your initial suggestion is the semantical one.

    Furthermore, a menu is almost always an unordered list, in that the sequence of the links in the menu would rarely be important to understanding the menu. While the 'Home'-link is not usually placed in the middle of the menu, it would still be obvious that it would take the user to the front page.

    For your need, this is what I would do:
    Code html4strict:
    <h*>Menu</h*>
    <ul>
     <li><a href="...">Menu item</a>
     <li><a href="...">Menu item</a>
    </ul>

    Are you sure you need the 'Menu' header, though? A menu should be easily identifiable for any user, and should not require a header. One might argue that adding a 'Menu' header (which can be hidden using CSS) will allow screen reader users to quickly reach the menu by using the Skip to next header-function. On the other hand, I rarely see this, and must admid that I don't do it myself.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Christian, I know that it's not an absolute requirement to use the ending </li> tags in HTML 4, but shouldn't we do it anyway?

    Code HTML 4 Strict:
    <li><a href="...">Menu item</a></li>

    (Which brings up the obvious question of why we should do it when it isn't a strict requirement.... Hopefully, someone with more esoteric knowledge than mine can answer this one definitively.)

  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)
    There are no inherent technical benefits to closing end tags in HTML. There are, however, some considerations to take:
    • Internet Explorer has a bug, in which the parser does not close an open p tag when the next block-level tag is table. This means that the table will be treated as if it was inside the p, even though this is semantically impossible. Therefore, p tags should always be closed (or at least when they occur before a table).
    • Most of the table sub-elements have optional end tags, but omitting them can make the code excessively difficult to read.
    • The bandwidth used to transmit the few extra bytes is no longer significant, and adding end tags has no technical disadvantages.


    I usually do add end tags to all items, but for simple lists, I sometimes don't, since I don't know any bugs which effect omitted li end tags.

    By the way, this is a great example of a non-verbose HTML 4.01 Strict table:

    Code html4strict:
    <table>
     <thead>
      <tr>
       <th colspan=3>Header
     <tfoot>
      <tr>
       <th colspan=3>Footer
     <tbody>
      <tr>
       <th scope=col rowspan=2>Subheader
       <td rowspan=2>Data
       <td>Data
      <tr>
       <td>Data
    </table>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    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 should do it so we get a "warm feeling" inside or something, and then can "pretend" it will easily convert to XHTML - if we are really that way inclined. It will be there within the DOM anyway... basically like mentioned above it is more for safety and 'code consistency' reasons.

    Personally, I always close them as it's one of things I didn't like about HTML (that you could Omit several start or end tags) when teaching myself in '99.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    We should do it so we get a "warm feeling" inside or something, and then can "pretend" it will easily convert to XHTML - if we are really that way inclined. It will be there within the DOM anyway... basically like mentioned above it is more for safety and 'code consistency' reasons.

    Personally, I always close them as it's one of things I didn't like about HTML (that you could Omit several start or end tags) when teaching myself in '99.
    I hear you. I still want to close the IMG tag, though I know intellectually it doesn't make semantic sense to close it (it isn't enclosing anything).

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks,
    but I suppose the problem is that i am not actually concerned with CSS yet. This is more how to create a PHP that writes proper semantic code. ANd thanks for the HX tip, thats, very good to know!

    I guess I was wondering when it was ok to putt content in a UL that is not in an LI

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Thanks,
    but I suppose the problem is that i am not actually concerned with CSS yet. This is more how to create a PHP that writes proper semantic code. ANd thanks for the HX tip, thats, very good to know!

    I guess I was wondering when it was ok to putt content in a UL that is not in an LI
    Sorry, your title mislead me

    If the heading tag 'heads' the entire list (each list item), then it would make most sense to leave the <hx> tag outside of the list.

    If each list item needs its own heading, then you would nest individual <hx> tags inside each <li>.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    coop,
    Again, quite handy to know. but I am still curious what us the UL for ???
    is it simply a container that can only have LI as children (not even span/text?)

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    coop,
    Again, quite handy to know. but I am still curious what us the UL for ???
    is it simply a container that can only have LI as children (not even span/text?)
    An [ul|ol] may only contain <li> elements as direct children.

    As you may already know, you can nest arbitrary elements inside each <li> element, but never as direct children of the [ul|ol] elements.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks


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
  •