画像リンク（ホバー効果あり）、タイトル、説明のセットのセマンティックhtml構造？

StackOverflow https://stackoverflow.com/questions/1224197

  •  11-07-2019
  •  | 
  •  

質問

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

これがどのように見えるかのスクリーンショットです： 代替テキストhttp://img26.imageshack.us/img26/9806/screenshothmr.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にラップすることもできますが、それは余分なマークアップのようです。

たぶん私はあまりにもうるさいですが、これに対する良い解決策があるかどうか知りたいです。とても長い質問です。最後まで読んでくれてありがとう。

役に立ちましたか？

解決

この目的で<DL>を使用することは、実際には less のセマンティックであり、次に<DIV>を使用することです。定義リストを作成することはほとんどありません。

divにラップされたリンク、ヘッダー、および段落は、完全に受け入れられるようです。代わりに、番号なしリストを使用してみてください。ただし、<=>を使用した場合と同じ（またはdtとddの分離がなくなるとさらに悪化する）CSSの問題が発生する可能性があります。また、ヘッダータグを使用してもリストアイテム内では検証されないため、別の段落/ 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>

他のヒント

後者の例は完全に良いと思います。タグに含まれるコンテンツを適切に説明するタグを使用しています。スタイルをオフにしても、ページの一般的な考え方はそのままです（セマンティックWebの鍵）。

idrumgoodに同意します。これはプロジェクトのリストではなく、一連のプロジェクトです。 divを使用します。完全に有効な使用法です。 HTML5を使用している場合、<！> quot; section <！> quot;を使用します。各アイテムと<！> quot; figure <！> quot;スクリーンショット用。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top