Mobile app version of vmapp.org
Login or Join
Dunderdale272

: Using list vs div for gallery like items display 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

@Dunderdale272

Posted in: #WebsiteDesign

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

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Dunderdale272

2 Comments

Sorted by latest first Latest Oldest Best

 

@Dunderdale272

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.

10% popularity Vote Up Vote Down


 

@Annie201

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme