web-dev-qa-db-ja.com

アンカーの内側に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要素の従来の解釈を上書きすることをお勧めします。

誰かがこの問題について何か他のヒントをお持ちですか?

480
Tom

対応しているHTMLのバージョンに応じて、

  • HTML 5は、インタラクティブなコンテンツがない限り、<a>要素は段落全体、リスト全体、表全体など、さらにはセクション全体でも囲むことができると述べています他のリンク) "#:。

  • HTML 4.01<a>要素は インライン要素 のみを含むことを指定します。 <div>ブロック要素 なので、<a>の中には現れないかもしれません。

    もちろん、インライン要素を出現のようにブロックにしたり、インラインにレンダリングされるようにブロックのスタイルを設定したりすることは自由です。 HTMLでの用語inlineおよびblockの使用は、要素とドキュメントのセマンティック構造との関係を意味しますが、CSSの同じ用語は、要素の視覚的スタイルに関連しています。インライン要素をブロック状に表示するようにしても大丈夫です。

    ただし、CSSが表示されていないとき、たとえばスクリーンリーダーなどの支援技術を介してアクセスしたとき、あるいは強力なGooglebotによって調べられたときなど、ドキュメントの構造が依然として意味をなすようにする必要があります。

684
NickFitz

いいえ、それは検証されませんが、はい、それは一般的に現代のブラウザで動作します。そうは言っても、アンカーの内側にスパンを使用し、その上にdisplay: blockを設定すると、確実に至る所で機能し、検証されます。

74
Eloff

W3Cのドキュメントではwrongsinのような概念は使用していませんが、手段を提供する適切かもしれませんのような概念は使用していますそして落胆する

実際には、 セクション4 の2番目の段落では、4.01の仕様では次のように単語が分類されています。

この文書の「してはいけない」、「してはいけない」、「必要」、「しない」、「しない」、「しない」、「推奨」、「可能」、および「任意」のキーワードは次のとおりです。 [RFC2119]で説明されるように解釈されるために。ただし、読みやすくするために、これらの単語はこの仕様のすべての大文字には含まれていません。

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

一般に、インライン要素はデータと他のインライン要素だけを含むことができます。

「概して」という条件は、HTML 4.01がインライン要素にブロック要素を含むことを許可すると言うのに十分なあいまいさを導入するように見えます。

確かに、CSS2には表示プロパティの値 inline-block )があり、これは説明する目的に適しているように思われます。一種の行動。

ここではDTDはそれほど寛容ではないように見えますが、 DTD のテキストは仕様によって異なります。

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

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

29
Ewan Todd

HTML5仕様の場合...インライン要素の中にブロックレベルの要素を置くことが可能になりました。そのため、 'a'要素の中に 'div'または 'h1'を入れることは今では完全に適切です。

13
Abir

<div><a>の中に入れることはできません - それは有効な(X)HTMLではありません。

Display:blockでスパンスタイルを設定しても、ブロックレベルの要素をその中に入れることはできません。物事を変更します。

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

4
Greg

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構文的に正しいとしてもこれを許可しないようなスペックの中におそらく強力な表現があるかもしれませんが、私はそれが質問のトピックではないのでこれ以上追求しません。

3
Carl Smotricz

HTML5では、<div>のようなブロックレベルの要素は<a>タグでラップすることができます。 MDN に従って、<div>フローコンテンツのコンテナ/ラッパー と見なされますが、<a>フローコンテンツ と見なされます。意味的には、ブロックレベル要素として機能するインライン要素を作成する方が良いかもしれません。

2
Beepye

それは間違っています。 span を使用してください。

2
Jon Hadley

<a>ブロックを作成しようとしているのなら、div要素の中に<a>を配置しないでください。ブロック要素であるため、同じ効果が得られます。

1
Dave

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

1
Chris

私は人々がこの質問をする時のほとんどの時間、彼らはdivだけでサイトを構築したと思います、そして今divの1人はリンクである必要があります。

私は誰かがdivの中にリンクを張るためだけにアンカータグの中に透明な空の画像PNGを使っているのを見ました、そしてその画像はdivと同じサイズでした。

実はかなり悲しいのですが…それはうまくいきます….

0
user1081070

Divをアンカータグの内側に配置するというセマンティックの問題を回避したい場合は、divと同じレベルにアンカータグを配置し、それらをすべてposition:relativeのコンテナでラップし、アンカータグの位置をabsoluteにして展開容器を埋める。また、コンテンツフローの最後にない場合は、コンテンツの上に配置するためにそこにZインデックスを配置するようにしてください。

示唆されたように、私はマークアップコードを追加しました:

<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;
}
0
Eugen