aタグの中にdivタグを入れる場合について。

Question

aタグの中にdivタグを入れる場合に付いて質問です。

html5の仕様書を読むと、
（http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element）
aタグはフローコンテンツということになっておりますが、

フローコンテンツの子孫要素にdivを使用することは（仕様書的に）許されていますか？
あわせて、↑の回答の根拠となる仕様書の部分（URLなど）を記載していただくと助かります。

think49 · Accepted Answer

#2,5,7 です。

---
(例題) A要素がB要素を内包できるか否かを確認したい
この場合、A要素の Content model を見る必要があります。

(ケース1)
1. A要素の Content model は Flow content
2. B要素の Categories は Flow content なので、A要素はB要素を子要素に出来る

実際はありませんが、仮に Flow content に Content model が定義されているとすればこうなります。

(ケース2)
1. Flow content の Content model は Flow content
2. A要素の Categories は Flow content なので Flow content を子要素に出来る
3. B要素の Categories は Flow content なので、A要素はB要素を子要素に出来る
---

(ケース2) がありえない理由がわかるでしょうか。

同じ Flow content でもdiv要素は「Content model: Flow content」ですが、p要素は「Content model: Phrasing content」です。
ある要素の Categories が Flow content だからといって一律に Flow content を子要素に出来るというロジックにはなりません。
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-p-element

Tacosan · Answer

「フローコンテンツの子孫要素にdivを使用することは（仕様書的に）許されていますか？」という質問そのものが無意味だと思う.

「子要素として何を使えるか」ということについてはコンテントモデルを見る必要があるはず. 「当該要素がフローコンテントなのかフレージングコンテントなのか (はたまた別の何かなのか)」は考えてもしょうがないのでは?

参考URL：http://www.w3.org/TR/html5/content-models.html

think49 · Answer

a要素の内容モデルは Flow content ですから、a要素はdiv要素 (Flow content) を子孫に持つことが可能です。
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
http://www.w3.org/TR/html5/grouping-content.html#the-div-element

Tacosan · Answer

a のコンテントモデルとして何が書かれているのか, そしてそれが何を意味するのかはあなた自身で調べることができるはずですね.

そして, 調べれば「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」であることもわかるはず.

Tacosan · Answer

はて, 第三者が「何を」理解できない, と思われているのですか?
それは, あらゆる「第三者」が理解しなければならないものなのですか?

think49 · Answer

#2 です。訂正。

×　a要素の内容モデルは Flow content ですから、a要素はdiv要素 (Flow content) を子孫に持つことが可能です。
○　a要素の内容モデルは "Transparent, but there must be no interactive content descendant." ですから、a要素は interactive content を除く Flow content を子に持つことが可能です。

Tacosan · Answer

ホラーでもなんでもありません. 端的にいえば「#5 は何かを盛大に勘違いしているだけ」です. ただしどうしてそんな風に勘違いできるかは全く不明.

a の Content Model は
Transparent, but there must be no interactive content descendant.
とあります. but 以下はさておいて, この transparent は
http://www.w3.org/TR/html5/content-models.html#t …
にあるように「親要素の content model を継承する」という意味です. 総合すると
・a の親要素の content model が flow content なら a 自身の content model も flow content,
・a の親要素の content model が phrasing content なら a 自身の content model も phrasing content
です. そして, div 要素の category は flow content であって phrasing content ではありません.

いくらなんでもここまでくれば #1 で
「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」
と書いたこともわかるはず. 例えば
<div><a ...><div ...>...</div></a></div>
は OK だが
<p><a ...><div ...>...</div></a></p>
はアウト (自分で考えてみてください).

余談だけど, 実は HTML 4.0 においても「そこだけ見ても何を入れることができるのかわからない」要素が存在します. 気付いてない?

...

は OK だが

...

はアウト (自分で考えてみてください). 余談だけど, 実は HTML 4.0 においても「そこだけ見ても何を入れることができるのかわからない」要素が存在します. 気付いてない?

think49 · Answer

To: #6 (Tacosan) さん

ご指摘に感謝します。
#5 の Transparent ですが、「a要素の Content model を継承する」と解釈してしまいました。
つまり、#5 は完全に間違っていました。申し訳ありません…。
http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#transparent-content-models
http://www.html5.jp/tag/models/index.html#transparent-content-models

---
To: reggaepuncさん

今更ですが、一つだけ気になったので補足を。

> フローコンテンツの子孫要素にdivを使用することは（仕様書的に）許されていますか？
フローコンテンツの Content model というのはありませんから、この質問自体が成り立ちません。
Content model は各要素毎に独立して定義されています。

Tacosan · Answer

えぇと....

なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。（今やっと気づいた。）
こういう根本的な部分は早く指摘して欲しいですね。

とのことですが, これは
・#1 で指摘するようでは遅すぎる. もっと前に指摘してほしかった
・常識的に考えて「コンテントモデル」と「Content Model」が同じものであるはずがない
のどちらの意味でしょうか? それともどちらでもない?

「仕様の見方」についていうと, まず「仕様」というものに慣れているかどうかからはじまります. 自分が「慣れていない」と思うなら, 「見方に疑問はないと思っても一応『どのように見るのか』を確認する」方がよいと思います. ここだと各要素に与えられている「Categories」とか「Contexts in which this element can be used」とかの意味です. そしてそれはだいたい仕様に書いてあるもので (というか書いてなければ仕様の欠陥と言っていい), 今の場合だと 3.2.4 Element definitions
http://www.w3.org/TR/html5/elements.html#element-definitions
にあります. なぜ「そこを見ればいいと考えられるか」といえば, 今考えているのが「a要素とはどういうものか」, 言い換えれば「a要素の定義」だからです. そこで「要素の定義」, 英語では「element definition」のような文字列がどこかにあるはず... と推測することができます.

さて, 3.2.4 Element definitions によれば「子要素として何を使うことができるかは Content model に書いてある」とわかります. a要素では
Transparent, but there must be no interactive content descendant.
と書かれています. これでわかればいいけど「transparent」がよくわからんしリンクもはってあるのでそこをたどれば 3.2.5.2 Transparent content models
http://www.w3.org/TR/html5/content-models.html#transparent
にいきつきます. ここには例もあるので, それと突き合せて考えれば結論は難しくないでしょう.

ついでにいうと a要素の categories が
Flow content.
When the element only contains phrasing content: phrasing content.
Interactive content.
となっているのは, 「a要素は
・flow content であり,
・(the element = a要素が phrasing content のみを含むときには) phrasing content であり,
・interactive content である」
と読む必要があります. 2つ目は「transparent content models」との関係で入っています.

aタグの中にdivタグを入れる場合について。

「フローコンテンツの子孫要素にdivを使用することは（仕様書的に）許されていますか？」という質問そのものが無意味だと思う.

この回答への補足

a要素の内容モデルは Flow content ですから、a要素はdiv要素 (Flow content) を子孫に持つことが可能です。

a のコンテントモデルとして何が書かれているのか, そしてそれが何を意味するのかはあなた自身で調べることができるはずですね.

この回答への補足

はて, 第三者が「何を」理解できない, と思われているのですか?

この回答への補足

#2 です。

ホラーでもなんでもありません. 端的にいえば「#5 は何かを盛大に勘違いしているだけ」です. ただしどうしてそんな風に勘違いできるかは全く不明.

To: #6 (Tacosan) さん

#2,5,7 です。

えぇと....

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング