HTML/CSS で Div 全体をリンクするには?

HTML/CSS での Div 全体のリンク

CSS で、 を使用して div 全体をリンクします。タグは 2 つの主なアプローチを使用して実現できます:

意味的には間違っていますが、機能的なアプローチ:

<code class="html"><a href="http://example.com">
  <div id="parentdivimage" style="..." />
</a></code>

このコードは機能しますが、HTML5 標準によれば意味的に間違っています。 、ブロック要素 (div) をインライン要素 (アンカー) 内に直接配置するためです。

JS アプローチで意味的に正しい:

<code class="html"><div id="parentdivimage" style="..." onclick="window.location.href='http://example.com';" /></code>

このメソッドは JavaScript を使用しますdiv がクリックされたときにリンクをトリガーします。これは意味的には正しいですが、外部コードを使用する必要があります。

Div なしで意味的に正しいアプローチ:

<code class="html"><a href="http://example.com">
  <span style="display: block; ..." >
    ...
  </span>
</a></code>

を使用することにより、 div の代わりに要素を使用すると、目的のブロックレベルの表示を実現しながらセマンティックな正確さを維持できます。

検討されたアプローチ:

最適なアプローチは特定の要素によって異なることに注意してください。アプリケーションの要件。次の点を考慮してください。

• 厳密な意味検証が重要な場合は、 を使用します。
• JavaScript が利用可能で、意味的に正しいコードが必要な場合は、JS アプローチを使用します。
• 従来のブラウザーとの互換性が必要な場合は、正しくありませんが機能的なアプローチを使用します。

以上がHTML/CSS で Div 全体をリンクするには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。