SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: DIVs with LIs

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

    DIVs with LIs

    A recent reply to an earlier post stated that you weren't supposed to put DIVs within LIs in your mark up only ULs, SPANs, As and other LIs. Am not arguing this, but i wish to understand why this is so, aside from the all-mighty validation... I mean even validation must have a reason.

    I have come up with some neat tricks which used a block element ( such as a DIV or a P within an LI. Yes, I suppose I could use a SPAN and set its style to display as ":block" but I am concerned about structure should the page be view w/o a style sheet... and I had chosen to use DIVs since they are are essentially invisible when devoid of style attributes. I also figured it would not mess up the mark-up since I am putting a block element within a block element ( as opposed to trying to contain Ps within a SPAN for example...) and a lot more sensical than setting SPANS so that they simulate block elements. I also know it can be done as I have done it and it woks in most if not all browsers even the troublesome IE.

    I know these are sort of abstract questions but...

    Why is it bad? why is it invalid code? and if you had a navigation which drops down sections of content ( I mean with pictures and paragraphs of text.. why is it be improper to nest DIV ( containing IMGs and Ps )within an LI instead of building the whole content around styled LIs and ULs ( which would display the page content as a bulleted list when the style sheet is missing?

    another example...
    I had done a centering that nested a DIV within an LI and containing the nested UL/LIs as a way to be able to handle relative/absolute positioning and ad extra images to the roll over effect. Would it not have been MORE CODE to have used a UL/LI combo to replace the DIV? with no gain of control?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's nothing wrong with having a DIV as a child of an LI, if there is no more semantically appropriate element type available. In other words, if it's a paragraph, mark it up with P; if it's an unordered list, mark it up with UL, etc. But if there's nothing else that fits the bill, use DIV.

    Semantically it doesn't really make sense to mix block-level elements and inline elements on the same structural level, so it's better to use a SPAN if the rest of the content is text. If the LI contains other block-level elements it's better to use DIV.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy is right. Whatever is most appropriate use.

    I just don't see anything besides inline elements with in a li - since it is a list item and not a layout container :d

    Correct Usage:
    <ul>
    <li>Apples</li>
    <li>Pears</li>
    <li>Grapes</li>
    </ul>

    Incorrect Usage:
    <ul>
    <li><h3>Fruits</h3></li>
    <li><div>....</div></li>
    </ul>

  4. #4
    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)
    cooper,
    I agree. There somethings with are basic. following your example...

    one might use...
    <ul> fruits...
    <li>apples</li>, etc.

    Note I would not use Hx within the UL.. since I can style that.. BUT my question was more about semantic/ content and positioning what IF I has to design a page to contain the following info...

    Fruits
    Apples:
    Apples are quite tasty and easy grow, at least in the nothern hemisphere. blah blah ( SHORT paragraph)

    You can find apples.. blah blah blah.( SHORT paragraph) <picture of apples sales>

    learn more about apples here .. blah bla



    PEARS:
    pears are quite tasty and easy grow, at least in the nothern hemisphere. blah blah ( SHORT paragraph)

    You can find apples.. blah blah blah.( SHORT paragraph) <picture of apples sales>

    learn more about pears here .. blah bla.


    See what I am proposing?

    in addition what I had to fly out all that info NEXT to the label "apple" ( which would logically be the LI part ) so would I not put a DIV or maybe two for positioning visibility > I have done this, and I have see in it in "experimental" pages , which is where I learned the technique, tho probably not as gracefully as I would like.

    So now I have been told as I said above.. that you DONT do "this or that" and I am confused to which direction to progress.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    How about the following for a valid example

    Code html4strict:
    <ul id="gallery">
        <li>
            <img src="...">
            <h3>Title</h3>
            <p>Blurb</p>
        </li>
        ...
    </ul>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  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)
    ok, so th only thing that doesn't go in an LI is a div? because thats essentially what I am doing , if on occasion adding a div as a positioning container

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If the div is acting as a container for other block-level elements when there is no more appropriate element to use, then that's okay. That's the only time that a div really should be used.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    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 pmw57 View Post
    How about the following for a valid example
    It's valid, but semantically questionable, since you're mixing an inline element (img) with two block-level elements (h3 and p). It might make more sense if you wrapped a div round the image.

    The CSS rendering engine will wrap the image in an anonymous block box anyway, of course, but the markup is a bit jarring nevertheless.
    Birnam wood is come to Dunsinane

  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)
    I agree with Tommy...
    Last edited by cooper.semantics; Sep 4, 2008 at 00:42.

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't this a situation where you might use a definition list?

  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 SRD View Post
    Isn't this a situation where you might use a definition list?
    You could use a dl or you could use this. It is a preference thing.

    Code HTML4Strict:
    <div id="fruits">
    	<h2>Fruits</h2>
     
    	<h3>Peaches</h3>
    	<p><img src="" width="" height="" alt="" /> a descriptive paragraph goes here...</p>
     
    	<h3>Pears</h3>
    	<p><img src="" width="" height="" alt="" /> a descriptive paragraph goes here...</p>
    </div>

  12. #12
    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)
    in that case you could even use nested ULs. I guess I am talking for style needs. i know thats kinda evil. but lets say you wanted to position the group of LIs OUTSIDE the UL or maybe have a rounded box around them... wouldnt you need to wrap them in extra divs.. and since they are semantically nill and also block elements why is it considered so evil?

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    why is it considered so evil?
    It isn't where there isn't a more semantic way of coding the content - it is only "evil" where there is a better alternative. Generally it has the reputation for being evil because of all the people who use div, div, div, div when they should be using heading, paragraph, list, table.
    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="^$">

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    A comment from the html5 draft seems to cover the issue well.

    http://www.w3.org/html/wg/html5/#the-div
    Allowing div elements to contain phrasing content makes it easy for authors to abuse div, using it with the class="" attribute to the point of not having any other elements in the markup. This is a disaster from an accessibility point of view, and it would be nice if we could somehow make such pages non-compliant without preventing people from using divs as the extension mechanism that they are, to handle things the spec can't otherwise do (like making new widgets).
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    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 see.
    the quote PMW posted makes sense. Thinking about it, and straying a little from my original post, the div is essentially the "all-purpose" block level element. With CSS, one "could" stack and arrange a whole page using no other tag. ANd that WOULD be bad, from the accessibility point of view. But at the same time it supports my point, the div i s there to allow for things other tags cant do.

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I've found that the Elements of Meaningful XHTML has been very instructive.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •