Right way to list image banners - image

Question

I would like to ask if what is the right way to use 'ul'? will it be okay to use 'ul' to list some image banners? ex. i have 3 image banners with titles and all are floated left. I use to encounter this situation every time and the approach i came up with is the first markup using 'ul'.
Is it okay to use the markup below:
<section class="banners">
<ul>
<li>
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
</figure>
title here
</li>
<li>
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
</figure>
title here
</li>
<li>
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
</figure>
title here
</li>
</ul>
</section>
or should I use:
<section class="banners">
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
<figcaption>
title here
</figcaption>
</figure>
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
<figcaption>
title here
</figcaption>
</figure>
<figure>
<a href="#">
<img src="" width="" height="" alt="" />
</a>
<figcaption>
title here
</figcaption>
</figure>
</section>
Do they both represent semantic coding?
This is the sample of the image banner

Answer 1

Since the HTML5 spec is so mercurial and the semantics don't seem to play a major role practically, it's hard to say. However, based on your image, it looks like this is a navigation section. As such, you would want to section it with <nav>.
<ul> spec: http://www.w3.org/TR/html5/grouping-content.html#the-ul-element
<figure> spec: http://www.w3.org/TR/html5/grouping-content.html#the-figure-element
I don't think that these are much help. They are both used for grouping content. The order does not matter for <ul>.
From what I've read, it seems to me that the purpose of <figure> is for annotations of a document -- describing related images, etc. The spec specifically says that these could be moved elsewhere, like an appendix, but that doesn't seem to apply to your situation.
I don't think that <figure> is appropriate here. Instead, use <nav>. You can use the <ul> for styling if you need -- it doesn't provide much semantic meaning (just a somewhat generic grouping content element).