1

カテゴリ Web ページにアクセスしたとします。その唯一の目的は、画像と短いタイトルでそれぞれの内容を知らせることによって、適切なサブカテゴリに誘導することです。

UX の考慮事項に関しては、次の配置が最適であることが示唆されました (画像の前にテキスト)。

ここに画像の説明を入力

各写真とテキストの組み合わせは、それぞれのサブカテゴリにリンクします。

セマンティック HTML5 を考慮すると、これらはサブカテゴリのタイトルであり、正確にはキャプションではないため、<figcaption>要素を使用するのは適切でしょうか? それとも何か他のものですか？


図のキャプションの使用:

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<figcaption>Rhinos</figcaption>
<img />
</a>
</figure>


代わりにヘッダー (またはその他のもの) を使用します。

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<h3>Rhinos</h3>
<img />
</a>
</figure>


または、どのリースが意味的に正しく、スタイリングを容易にするでしょうか?

4

1 に答える 1

1

このコンテンツはおそらくページのメインコンテンツであるため、figure要素の使用はここでは正しくないと思いますが、次のfigureように述べています。

[…]しかし、ドキュメントの流れに影響を与えることなく、その主要なコンテンツから移動することができます[…]

figureニュース記事などの紙や写真に図がある場合に使用します。「[…] は、通常、ドキュメントのメイン フローから 1 つの単位として参照される」という内容です。

代わりに、section各カテゴリを使用し、すべてのカテゴリを で囲みます(これは、 「私たちの惑星の動物」という見出しによって開かれる、そのセクション コンテンツnavのメイン ナビゲーションであるためです)。

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->

 <section>
  <a>
  <h1>Rhinos</h1> <!-- you could use h3 here instead -->
  <img />
  </a>
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

</nav>

見出しを使用したくない場合は、カテゴリ (dlまたはul) のリストを使用することもできます。ulここよりもフィットすると思いdlます：

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->
 <ul>
  <li><a>Rhinos <img /></a></li>
  <li>…&lt;/li>
  <li>…&lt;/li>
  <li>…&lt;/li>
 </ul>
</nav>

section各li要素 ( ) で使用することも可能かもしれませんが<li><section>…&lt;/section></li>、これがドキュメントのアウトラインにどのように影響するかはわかりません。

于 2012-12-07T06:32:16.147 に答える