什么是在HTML5中显示单个项目组合项目的最具语义的方式？

Question

当然有几个关于正确使用html5 <figure>元素的讨论和问题,但没有一个对我的问题有特定的答案.

这是关于显示投资组合项目的一般性问题.当然,你可以这样做:

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

要么

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

当然,还有其他十几个方式来描述一个单一的项目,但我想知道,如果这将是有效的和语义 HTML5,如果你整个包住项目到<文章>元素,并把图片放到一个<人物>元素.考虑以下示例

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

如果没有,那么显示它们的最具语义的方式是什么？

Answer 1

我个人认为使用数字对于描述/图像来说不是一个好主意.虽然我会说你以有效的方式使用它,但我不一定将它定义为带有标题的数字,因此我发现调用因此并不是特别具有语义性.我觉得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>