1. ホーム
  2. html

[解決済み] アンカー内にdivを置くことは正しいことですか?

2022-03-17 15:48:26

質問

インライン要素の中にブロック要素を入れるのはHTMLの罪だと聞いたことがあります。

<a href="http://example.com">
    <div>
        What we have here is a problem. 
        You see, an anchor element is an inline element,
        and the div element is a block level element.
    </div>
</a>

しかし、外側のアンカーを次のようにスタイルしたらどうでしょう。 display:block をスタイルシートで使用できますか?やはり間違っているのでしょうか?HTML 4.01の仕様では ブロック-レベルおよびインライン要素 はそう考えているようです。

スタイルシートは レンダリングを指定します。 要素を含む はブロックまたはインラインとしてレンダリングされます。この場合 場合によっては、インラインスタイル リスト要素の場合、これは が適切ですが、一般的には は推奨されません。 従来の での HTML 要素の解釈について説明します。 このように

この問題について、さらに何かヒントをお持ちの方はいらっしゃいますか?

解決方法は?

対応しているHTMLのバージョンによる。

  • HTML 5 には <a> 要素は、段落全体、リスト、テーブルなど、さらにはセクション全体を包むことができ、その中にインタラクティブなコンテンツ(例えば、ボタンやその他のリンク)がない限り、可能です。

  • HTML 4.01 は、次のように指定します。 <a> 要素には インライン要素 . A <div> ブロック要素 の中に表示されないことがあります。 <a> .

    もちろん、インライン要素を が現れる。 をブロックにする、あるいは実際にブロックがインラインでレンダリングされるようにスタイルを設定します。用語の使用 inlineblock の用語は、HTMLでは文書の意味的な構造と要素の関係を意味しますが、CSSの同じ用語は、要素の視覚的なスタイリングに関連します。インライン要素をブロック状に表示させるのであれば、それはそれで問題ありません。

    しかし、CSSが存在しない場合でも、例えばスクリーンリーダーなどの支援技術でアクセスしたとき、あるいは強力なGooglebotが検査したときに、文書の構造が意味をなすようにする必要があります。