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>

確かに、1 つのアイテムを記述する方法は他にもたくさんありますが、アイテム全体を <article> 要素にラップし、画像を <figure> 要素にラップした場合、それが有効でセマンティックなHTML5 になるかどうかを知りたいです。次の例を検討してください

<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

個人的には、図を使用することは、説明/イメージにとって良い考えではないと思います。あなたはそれを有効な方法で使用していると言えますが、必ずしもキャプション付きの図として定義するとは限りません。したがって、呼び出しは特に意味的ではないと思います。figure/figcaption タグは、ダイアグラムなどに使用するのが最適だと思います。<p>あなたの場合、画像を単独で配置し、短い説明をタグに入れるのがおそらく最善だと思います（2番目の例で行ったように）。

また、ヘッダーを<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/ )、article 要素でラップすることは正しいでしょう。ページから取り出しても意味のある独立したセグメントです ( http://html5doctor.com/the-article-element/ )

于 2012-04-12T12:42:47.247 に答える