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

html

Solution

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>

Problem

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?

Original source