CODEWITHSUNDEEP
htmlmarkup
user1415785
user1415785

Reputation: 364

HTML5 image list

I'd like to create a list of book covers with their titles as a menu entry to point to book detail pages. Visually, it would be something like this:

+-----+ +-----+ +-----+ +-----+
|     | |     | |     | |     |
|     | |     | |     | |     |
|     | |     | |     | |     |
|     | |     | |     | |     |
+-----+ +-----+ +-----+ +-----+
Title 1 Title 2 Title 3 Title 4

+-----+ +-----+
|     | |     |
|     | |     |
|     | |     |
|     | |     |
+-----+ +-----+
Title 5 Title 6

I'm looking for the most neat html structure: I don't know if I should use float figure elements, or an unordered list, or something else. What would you recommend?

Thanks!

Upvotes: 1

Views: 3725

Answers (2)

Nix
Nix

Reputation: 5998

You answer your own question:

I'd like to create a list of book covers

;-)

An unordered list would make sense. You could also simply make a loop of floated divs, or maybe even figure. Here's what the spec has to say about the figure element:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

It depends on the overall structure of the document, and what part the elements play.

Upvotes: 1

meeDamian
meeDamian

Reputation: 1164

I'd go with this:

<ul>
  <li>
    <figure>
      <img src="" alt="" />
      <figcaption>IMG title</figcaption>
    </figure>
  </li>
  <!-- more li's -->
</ul>

Upvotes: 1

Related Questions