0

これらの例の外観と動作を同じにする方法を知っています。しかし、HTML 構造を構築する正しい方法を知りたいです。

  1. <a><img><h1></h1></a>- インライン要素がブロック要素内にあるため、正しく表示されない

  2. <a><img></a><h1><a></a></h1>- 同じa要素が 2 回定義されています。また、ヘッダー内のマークアップについてもわかりません

  3. 他の解決策はありますか？

4

1 に答える 1

1

マークアップ (1) は、HTML5 ドラフト (およびブラウザーで受け入れられる) に従って有効ですが、現在の HTML 仕様では有効ではありません。マークアップ (2) は、2 つのリンクが同じ宛先を指している場合、ユーザビリティとアクセシビリティの原則に違反しています。次のマークアップは自然で、画像と見出しテキストのみをクリック可能にします (h1デフォルトで使用可能な幅を占める要素全体ではありません)。

<h1><a href=...><img src=... alt=...>Heading text</a></h1>

見出し内でのリンクは常に許可されていますが、その逆は許可されていません。

一方、見出しをクリック可能にする正当な理由はめったになく、なぜそこに画像があるのか​​疑問に思います。これが実際にはheaderではなく、サイト全体のヘッダーであり、画像が実際に会社のロゴである場合、適切なマークアップは次のようになります。

<div class=header><a href="/"><img alt=ACME src=acme-logo.png> – American Company
Manufacturing Everything</a></div>

(ページh1全体の見出し用に予約)。

于 2012-04-15T04:51:36.293 に答える