5

当然有几个关于正确使用 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> 元素中并将图片包装到一个 <figure> 元素中。考虑以下示例

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

如果不是，那么显示它们的最语义化方式是什么？

4

2 回答 2

5

我个人认为使用图形对描述/图像来说不是一个好主意。虽然我会说您以有效的方式使用它，但我不一定将其定义为带有标题的图形，因此我发现调用 so 并不是特别语义化。我觉得 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>
于 2012-04-12T14:02:11.717 回答
0

您的 figure 和 figcaption 元素的布局是正确的（http://html5doctor.com/the-figure-figcaption-elements/）并将其包装在文章元素中是正确的。这是一个独立的部分，可以从页面中取出并且仍然有意义（http://html5doctor.com/the-article-element/）

于 2012-04-12T12:42:47.247 回答