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

Question

当然有一些关于正确使用 html5

元素的讨论和问题，但没有一个对我的问题有具体的答案。

这更像是一个关于显示投资组合项目的一般性问题。当然，您可以这样做:

<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 item 放入

元素中，图片放入

元素中。考虑以下示例

<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

我个人不认为使用图形来描述/图像是个好主意。虽然我会说您正在以有效的方式使用它，但我不一定会将其定义为带有标题的图形，因此我发现调用 so 并不是特别语义化。我觉得 figure/figcaption 标签最好保留给图表之类的东西。在你的情况下，我认为你最好把图像放在它自己的位置上，并将简短描述放在 <p> 中。标记(就像您在第二个示例中所做的那样)。

我还将 header 放在 <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>