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

[SM]

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

 

[Adrienne Boswell]

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.

 

[SM]

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:

 

[Nik Coughlin]

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>

 

[dorayme]

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]

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

 

[Adrienne Boswell]

Thanks again dude!

That would be Dudette!

 

[Els]

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

 

[dorayme]

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

 

[SM]

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

Thank girls and guys!
Everything makes sense now....