Geek Answers Handbook

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

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

This is a more general question about displaying portfolio items. Of course 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, of course, a dozen more ways to describe a single element, but I would like to know if it will be valid and semantic HTML5 if you wrap the whole element in the <detail> element and the image in number> element. Consider the 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 will be the most semantic way to display them?

+5
source share
2

, /. , , , , . , figure/figcaption , . , , , <p> ( ).

<header>.

, :

<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>
+6

More articles:


All Articles