Whats the most semantic way to display a single portfolio item in HTML5?

Question

There were of course several discussions and questions of the correct usage of the html5 <figure> Element but none of them had a specific answer to my question.

It's more a general question about displaying portfolio items. Sure, you could do something like this:

<ul>
  <li>
    <h1>Project Title</h1>
    <img src="#"/>
    <p>a short description</p>
  </li>
</ul>

or

<div class="portfolio-item">
  <h1>Project Title</h1>
  <img src="#"/>
  <p>a short description</p>
</div>

There are certainly a dozen other ways to describe a single item but I'd like to know if it would be valid and semantic HTML5, if you wrap the whole item into an <article> element and the picture into an <figure> element. Consider following example

<article class="portfolio-item">
  <h1>Project Title</h1>
  <figure>
    <img src="#">
    <figcaption>a short description</figcaption>
  </figure>
  <a href="#"> View details</a>
</article>

If not, what would be the most semantic way to display them?

Answer 1

I personally don't think using a figure would be a good idea for the desciption/image. While I would say that you're using it in a valid manner, I wouldn't necessarily define it as a figure with a caption, and therefore I find the calling so isn't particularly semantic. I feel the figure/figcaption tag is best reserved for things like diagrams. In your case I think you're probably best off just putting the image on it's own, and the short description in a <p> tag (as you did in your second example).

I'd also put the header inside a <header> tag.

This is how I'd do it, as a list of articles:

<ul>
  <li>
    <article class="portfolio-item">
      <header>
        <h1>Project Title</h1>
      </header>
      <img src="#">
      <p>a short description</p>
      <a href="#"> View details</a>
    </article>
  </li>
  <li>
    etc...
  </li>
</ul>