アンカー内にdivを置くことは正しいですか？

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

<a href="http://www.mydomain.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>。

  もちろん、ブロックのように見えるようにインライン要素をスタイルすることも、インラインでレンダリングされるようにブロックをスタイルすることも自由です。用語の使用inline及びblockCSSで同じ用語が複数の要素の視覚スタイルに関連しているのに対し、HTMLでは、文書の意味構造への要素の関係を指します。インライン要素をブロック状に表示する場合は問題ありません。

  ただし、CSSが存在しない場合、たとえばスクリーンリーダーなどの支援技術を介してアクセスする場合や、確かに強力なGooglebotによって調べられる場合でも、ドキュメントの構造が意味をなすことを確認する必要があります。

いいえ、検証しませんが、はい、一般的に最新のブラウザで動作します。そうは言っても、アンカー内でスパンを使用し、それに設定display: blockすると、間違いなくどこでも機能し、検証されます！

W3Cドキュメントでは、次のような概念を使用していません 、間違ったとの罪を、それはのようなものをを使用しない手段を提供し、適切かもしれないと落胆します。

実際、セクション4の 2番目の段落で、4.01仕様は次のようにその単語を項目化しています

このドキュメントのキーワード「MUST」、「MUST NOT」、「REQUIRED」、「SHALL」、「SHALL NOT」、「SHOULD」、「SHOULD NOT」、「RECOMMENDED」、「MAY」、および「OPTIONAL」は、 [RFC2119]で説明されているように解釈されます。ただし、読みやすくするために、これらの単語はこの仕様ではすべて大文字で表示されるわけではありません。

それを念頭に置いて、私は決定的な声明が7.5.3ブロックレベルとインライン要素にあると信じています

通常、インライン要素には、データと他のインライン要素のみを含めることができます。

「一般的に」という条件は、HTML 4.01ではインライン要素にブロック要素を含めることができると言うほどのあいまいさを導入しているようです。

確かに、CSS2には表示プロパティ値inline-blockがあります。があります。これは、説明した目的に適しているようです。それが広くサポートされていたかどうかはわかりませんが、誰かがそのような振る舞いの必要性を予想していたようです。

DTDはここでは許容度が低いようですが、 ではDTDの許容度ますが、DTDテキストは仕様に従っています。

HTML 4.01仕様には、DTD内で表現できない追加の構文制約が含まれています。

別のコメントで、あなたはそれをアンカーで包むことによってブロックをアクティブにしたいことを提案します。HTMLがそれを禁止しているとは思わない。CSSは明らかにそれを許可している。それが正しいかどうかについてのタイトルの質問に答えるために、私はイエスと言います。基準により、時々正しいです。

HTML5仕様では...ブロックレベルの要素をインライン要素内に配置できるようになりました。したがって、「a」要素の内部に「div」または「h1」を配置することが完全に適切です。

<div>内部に置くことはできません<a>-それは有効な（X）HTMLではありません。

display：blockでスパンのスタイルを設定しても、ブロックレベルの要素をその内部に配置することはできません。CSSの方法に関係なく、（X）HTMLは（X）HTML DTD（どちらを使用しても）に従う必要があります。物事を変えます。

ブラウザはおそらくあなたが望むようにそれを表示するでしょう、しかしそれはそれを正しくしません。

HTML 4のDTDはhttp://www.w3.org/TR/REC-html40/sgml/dtd.htmlにあります。このDTDは、機械で処理可能な形式の仕様です。DTDがXMLおよびHTML 4を管理するという制限があり、特に「一時的な」フレーバーは、「正当な」XMLではない多くのことを許可します。それでも、指定子の意図を体系化することに近いと思います。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

この階層にリストされているタグは、許可されたタグの合計であると解釈します。

仕様には「インライン要素」と記載されている場合がありますが、ブロック要素の表示タイプをインラインとして宣言することでインテントを回避できることを意図していません。インラインタグは、どのように悪用しても、セマンティクスが異なります。

一方で、を含めることで要素をspecial入れ子にできるように思えることは興味深いですA。仕様には、XMLが構文的に正しいとしてもこれを許可しない強い表現が含まれている可能性がありますが、質問のトピックではないため、これ以上は追求しません。

のようなブロックレベルの要素は、HTML5のタグで<div>ラップでき<a>ます。<div>あると考えられているフローコンテンツのコンテナ/ラッパーと<a>のが考慮されるフローコンテンツに応じMDN。意味的には、ブロックレベルの要素として機能するインライン要素を作成する方がよい場合があります。

アンカータグ内にdivを配置するという意味上の問題を回避する場合は、アンカータグをdivと同じレベルに配置し、position：relativeのコンテナーですべてをラップし、アンカータグの位置をabsoluteにして、それを展開します。コンテナを満たします。また、コンテンツフローの最後にない場合は、そこにZ-indexをスローして、コンテンツの上に配置してください。

提案されているように、マークアップコードを追加しました。

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

そしてCSS：

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

あなたが<a>ブロックを作る努力に行くつもりなら、なぜ<a>divの中に入れないでください、それはあなたに同じ効果を与えるブロック要素です。

それをブロックスタイルの要素に変更すると、いいえ、それはもはや「間違った」ものではありませんが、おそらく検証されません。しかし、あなたがしていることをすることはあまり意味がありません。アンカータグを内部divのないブロックレベル要素として保持するか、divを外部に配置する必要があります。

それは間違っています。スパンを使用します。

ほとんどの人がこの質問をするとき、彼らはdivだけのサイトを構築していて、divの1つがリンクである必要があると思います。

誰かがアンカータグ内で透明な空の画像PNGを使用してdiv内にリンクを作成するのを見ました。画像はdivと同じサイズでした。

実はかなり悲しい...でもうまくいく...

これを実現するには、「:: before」疑似要素を追加します。

純粋なCSSトリック;）

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

参考までに。

divをクリック可能にすることが目的の場合は、jQuery / Java Scriptを使用できます。

次のようにdivを定義します：

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

jQueryは次のように実装されます。

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

これは複数のdivでも機能します-このスレッドのトムのコメントによると