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. Advertising

  2. On Nov 8, 12:01 pm, SM <> wrote:
    > 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


    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. Advertising

  3. SM

    SM Guest

    On Nov 8, 3:28 pm, Adrienne Boswell <> wrote:
    > On Nov 8, 12:01 pm, SM <> wrote:
    >
    >
    >
    > > 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

    >
    > 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.


    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:
    > ...
    > <!-- 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>
    > <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>
    > <li><a href="#">Cloud 9</a></li>
    > <li><a href="#">The End</a></li>
    > </ul>
    > </div>
     
    SM, Nov 8, 2007
    #3
  4. SM

    Nik Coughlin Guest

    SM wrote:
    >> <li><a href="#">Tribute</a></li>
    >> <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>
    >> <li><a href="#">Cloud 9</a></li>


    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

    In article
    <>,
    SM <> wrote:

    > 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?
    >



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

    http://tinyurl.com/27yrkx

    --
    dorayme
     
    dorayme, Nov 8, 2007
    #5
  6. SM

    dorayme Guest

    In article <47337daf$>,
    "Nik Coughlin" <> wrote:

    > <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>
    >


    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.



    > 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>


    --
    dorayme
     
    dorayme, Nov 9, 2007
    #6
  7. Gazing into my crystal ball I observed SM <>
    writing in news::

    >
    > Thanks again dude!
    >
    >


    That would be Dudette!

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 9, 2007
    #7
  8. SM

    Els Guest

    dorayme wrote:

    > In article <47337daf$>,
    > "Nik Coughlin" <> wrote:
    >

    [snip]
    > 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.


    [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 http://locusmeus.com/
     
    Els, Nov 9, 2007
    #8
  9. SM

    dorayme Guest

    In article <1qr3hbl0xduir$>,
    Els <> wrote:

    > dorayme wrote:
    >
    > > In article <47337daf$>,
    > > "Nik Coughlin" <> wrote:
    > >

    > [snip]
    > > 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.

    >
    > [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>


    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
     
    dorayme, Nov 9, 2007
    #9
  10. SM

    SM Guest

    On Nov 9, 3:38 am, dorayme <> wrote:
    > In article <1qr3hbl0xduir$>,
    >
    >
    >
    > Els <> wrote:
    > > dorayme wrote:

    >
    > > > In article <>,
    > > > "Nik Coughlin" <> wrote:

    >
    > > [snip]
    > > > 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.

    >
    > > [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>

    >
    > 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


    Thank girls and guys!
    Everything makes sense now....
     
    SM, Nov 12, 2007
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. mat
    Replies:
    0
    Views:
    369
  2. Alan Silver
    Replies:
    13
    Views:
    559
    Alan Silver
    Jun 29, 2006
  3. Mark C
    Replies:
    0
    Views:
    290
    Mark C
    Jan 17, 2007
  4. LongBow
    Replies:
    4
    Views:
    355
    Mark McIntyre
    Sep 3, 2004
  5. vlsidesign
    Replies:
    26
    Views:
    982
    Keith Thompson
    Jan 2, 2007
Loading...

Share This Page