Is this good code? Good practice advice needed...

Discussion in 'HTML' started by SM, Nov 8, 2007.

  1. SM

    SM Guest

    Hello,

    I've created a gallery of photos in php. The model is very simple:
    Album/subalbum/photos.
    If the user clicks on an album, a bunch of subalbums appear. And if
    the user selects one of the subalbum, a gallery of photos appear.

    The gallery of photos appear right beneath the subalbum list item
    selected by the user. I've tested everything and the result is prety
    cool.

    Now, because im trying to be compiant with HTML/XHTML, and mostly
    because im trying to create good code, i was wondering if the piece of
    code is OK.

    Even though everything works ok, i was wondering for example if i can
    insert a <div> between an <li>.
    Is it better to put an <a> inside a <ul><li> when im constructiing a
    list?


    This is a sample of the code. Notice the insertion of the gallery
    beneath the <li> selected by the user.
    ....
    <!-- CONTENT_RIGHT -->
    <div id="content_right">
    <ul>
    <li><a href="#">Gallery One</a></li>
    <li><a href="#">Sky</a></li>
    <li><a href="#">Hello World</a></li>
    <li><a href="#">Tribute</a></li>
    <div id="thumbnail">
    <a href="#"><img src="images/photography/1.jpg" /></a>
    <a href="#"><img src="images/photography/2.jpg" /></a>
    <a href="#"><img src="images/photography/3.jpg" /></a>
    <a href="#"><img src="images/photography/4.jpg" /></a>
    <a href="#"><img src="images/photography/5.jpg" /></a>
    </div>

    <li><a href="#">Cloud 9</a></li>
    <li><a href="#">The End</a></li>
    </ul>
    </div>
    ......

    Is this good code?

    Thanks
    Marco
     
    SM, Nov 8, 2007
    #1
    1. Advertisements

  2. A URL would be more helpful. But the answer your question, run the
    page through the validator and see what it comes up with. Hint: a UL
    element can only contain LI elements.
     
    Adrienne Boswell, Nov 8, 2007
    #2
    1. Advertisements

  3. SM

    SM Guest

    Thanks!
    I completely forgot about the W3C validator.
    I did the validation test and, indeed, i got an error on the <ul>
    element not having a <li> tag.
    I've added a <li> tag that wraps around the <div> (weird as it may
    sound) and validates correctly!

    Thanks again dude!


    code change:
     
    SM, Nov 8, 2007
    #3
  4. SM

    Nik Coughlin Guest

    Do you need that div at all?

    <li><a href="#">Tribute</a></li>
    <li id="thumbnail">
    <a href="#"><img src="images/photography/1.jpg" /></a>
    <a href="#"><img src="images/photography/2.jpg" /></a>
    <a href="#"><img src="images/photography/3.jpg" /></a>
    <a href="#"><img src="images/photography/4.jpg" /></a>
    <a href="#"><img src="images/photography/5.jpg" /></a>
    </li>
    <li><a href="#">Cloud 9</a></li>

    And while you're at it you could be pedantic and say that the thumbnails are
    a list as well:

    <li><a href="#">Tribute</a></li>
    <li>
    <ul id="thumbnail">
    <li><a href="#"><img src="images/photography/1.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/2.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/3.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/4.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/5.jpg" /></a></li>
    </ul>
    </li>
    <li><a href="#">Cloud 9</a></li>
     
    Nik Coughlin, Nov 8, 2007
    #4
  5. SM

    dorayme Guest


    Not really, you can't do this. This is better and you can
    probably improve further:

    http://tinyurl.com/27yrkx
     
    dorayme, Nov 8, 2007
    #5
  6. SM

    dorayme Guest

    This is not really correct because the idea is that the
    thumbnails are an expansion of the item Tribute. Your
    alternative, below, is correct but it is not pedantic.
     
    dorayme, Nov 9, 2007
    #6
  7. That would be Dudette!
     
    Adrienne Boswell, Nov 9, 2007
    #7
  8. SM

    Els Guest

    [snip example where the nested ul is inside the list element
    *following* the Tribute list element]

    I'll be pedantic then ;-), and say it is not correct. If the
    thumbnails are indeed an expansion of the item Tribute, the list would
    look like this:

    <li><a href="#">Tribute</a>
    <ul id="thumbnail">
    <li><a href="#"><img src="images/photography/1.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/2.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/3.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/4.jpg" /></a></li>
    <li><a href="#"><img src="images/photography/5.jpg" /></a></li>
    </ul>
    </li>
    <li><a href="#">Cloud 9</a></li>
     
    Els, Nov 9, 2007
    #8
  9. SM

    dorayme Guest

    That will teach me to be so soft-hearted and trusting! I had just
    posted at the time:

    http://tinyurl.com/27yrkx

    what I thought was a *more* correct plan than the OP

    and assumed without looking closely that Nick was following this
    general idea.
     
    dorayme, Nov 9, 2007
    #9
  10. SM

    SM Guest

     
    SM, Nov 12, 2007
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.