2

私は一連のアイテム（またはアイテムのリストですが、リストの使用法を暗示したくありません）を持っています。それらには、画像リンク、タイトル、および説明が含まれています。画像リンクにはホバー効果 (マウスオーバーでアルファが変化) が必要で、特定のレイアウト方法があります。画像を左側に、タイトルと説明を右側に配置します。また、アイテムのブロック全体の背景もあります。

これが私が望むもののスクリーンショットです： 代替テキスト http://img26.imageshack.us/img26/9806/screenshotmr.png

だから私の質問は、これに適したセマンティックhtml構造は何ですか? 私はこのようにdlを使用しようとしました：

<dl>
   <dt><a href="#"></a></dt> <!-- using the background of anchor for the hover effect -->
   <dd>Title<p>description goes here</p></dd>

   <dt>...
</dl>

しかし、これのためにcssを機能させるのに苦労しています。たとえば、a、dt、および dd の各セットに追加の背景が必要ですが、背景を組み合わせるために 3 つの異なる画像を使用したくありません。だから今、私はこれを行うためにたくさんのdivを使用することを考えています:

<div>
    <a href="#"></a> <!-- image link with background hover -->
    <h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation -->
    <p>description goes here</p>
<div>

このレイアウトの問題点は、意味的に見えないことです。順序付けられていないリストを使用して li でラップすることもできますが、それは余分なマークアップのようです。

うるさいだけかもしれませんが、これに対する良い解決策があるかどうかを知りたいです。かなり長い質問ですが、最後まで読んでいただきありがとうございます。

4

3 に答える 3

2

<DL>この目的で使用することは、実際には使用するよりもセマンティックでは<DIV>ないと思います-定義リストを作成していないことは間違いありません。

div で囲まれたリンク、ヘッダー、および段落は、私には完全に受け入れられるようです。代わりに順序なしリストを使用してみてください。しかし、CSS で<DL>. さらに、ヘッダータグを使用してもリストアイテム内で検証されないため、別の段落/ div /スパンに頼る必要があります-間違いなく理想的ではありません.

更新(以下のidrumgoodのコメントに基づく):
ヘッダー (およびその他のブロックレベルの要素) は順序付けされていないリスト項目内で検証を行うため、おそらく次のアプローチはセマンティックであり、スタイルで機能します。

<ul>
  <li>
    <a href="#"> </a> <!-- image link with background hover -->
    <h4>Title</h4>
    <p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag -->
  </li>
</ul>
于 2009-08-03T19:46:37.110 に答える
0

後者の例は完全に良いと思います。含まれるコンテンツを適切に説明するタグを使用しており、スタイルをオフにしても、ページの一般的なアイデアはまだそこにあります (セマンティック Web の鍵)。

于 2009-08-03T19:47:37.327 に答える
0

私は idrumgood に同意します。これはプロジェクトのリストではなく、一連のプロジェクトです。div を使用してください。これは完全に有効な使用法です。HTML5 を使用している場合は、各項目に「セクション」を使用し、スクリーンショットに「図」を使用します。

于 2009-08-04T03:25:48.817 に答える