Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm making a webpage for the company i'm working in, and I've been tasked with creating two display for items in content (it's a search result display page):

Gallery and List.

The thing is that I've used divs, but seen in Google images that they're using unordered list for displaying results.

I'd like to know if there's any advantage of using list instead of divs like I did.

Thanks a lot.

Demo: http://jsfiddle.net/USX34/

Expand the HTML result so you can see clearer.

Thanks a lot.

PS: I have posted question here but I'm not certainly sure that it's the right place, but I think it will be closed if posted i

share|improve this question
    
A list of items makes sense to display it as list rather than divs. It is only semantics of the markup language. There's no technical advantage choosing one over the other, although it's good practice to use lists. –  milo5b Jul 20 '12 at 15:45

2 Answers 2

up vote 3 down vote accepted

Your images are part of a set of items, and a list is more semantically appropriate, as noted in the comments.

Have a look at the way the excellent Twitter Bootstrap (version 2) handles groups of thumbnails:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/260x180" alt="">
    </a>
  </li>
</ul>

Version 3 of Twitter Bootstrap I believe would mark require it to be marked up differently.

share|improve this answer
1  
A little off-topic and admittedly I can't see the bigger, but why repeat the same class on every contained li and a when all the styling can be controlled by the class on the ul? –  w3d Jul 22 '12 at 0:25
    
@w3d I can't speak for the Twitter Bootstrap team, but the source can speak for itself: github.com/twitter/bootstrap/blob/master/less/thumbnails.less I expect it's to allow specific hover behaviors, and allow flexibility as to what contains the thumbnails (either <a> or <div>. If you have a better idea, fork the TwBootstrap code! :-) –  artlung Jul 22 '12 at 5:35

I would go with using unordered <li> lists you have the option to setup jQuery plugins which can sort and filter the lists. If you create dynamic ID's or Classes on each list element you can work with them even more. It's better than using just <div> tags.

share|improve this answer
1  
Thanks, sorry I can't choose 2 answers. –  Jorge Jul 21 '12 at 23:38
    
That's ok though it's the same answer and mine was posted first ;) –  Anagio Jul 22 '12 at 0:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.