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

質問

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

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

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

回答No.8

think49 · ベストアンサー

#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

お礼

たぶんわかったと思います。
html4のブロック要素、インライン要素の関係性、概念は捨て去るべきだと思いました。

今までは「html5って、所詮はhtml4からタグが増えたり減ったりしただけでしょ？」
という考えでした。

html4の延長にhtml5があるという理解は、少なくともコンテントモデルに関しては違うという理解で、概ね合っていると思いました。

html5が新しい概念を導入してきたことは残念でもあり、楽しみでもあると思いました。

今期強くお付き合いいただいたthink49さん、Tacosanさんに感謝いたします。
ありがとうございます。

お二方がいてここまでの回答を得られたものですので、
ベストアンサーはお二方に贈ります。
（システム上一つしか贈れないので、現場主義的だった方へ、贈っておきます。）

回答No.9

Tacosan

えぇと....

なるほど、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」との関係で入っています.

お礼

追い打ちに強烈な解説をありがとうございます。これ、お金取れるレベルですね。
ありがたや～。

はっきりって英語が沢山で眠くなるのですが少し読みました。
（http://www.w3.org/TR/html5/content-models.html#transparent）
--------------------------
The content model of a transparent element is derived from the content model of its parent element
--------------------------

「transparent element」
↑日本人的にはふざけた名前ですよ。。これ専門用語ってやつですか。
この定義を見て初めて理解できますね。

--------------------------
>なるほど、Categoryの項目ではなく、Content modelの項目を見るんですね。（今やっと気
>づいた。）
>こういう根本的な部分は早く指摘して欲しいですね。
↑これは一人ごとみたいなものです。愚痴です。

--------------------------
仕様書の読み方。結構すんなり受け取れました。
「読み方」超大事ですね。
私が最初の質問してる時点では、ここまで深い仕組みだと検討をつけてませんでしたから。

--------------------------
http://www.w3.org/TR/html5/elements.html#element-definitions
あー。↑これはとてもいいですね。
わかりやすい。（日本語でここを引用して頂いたから理解できてるわけですが。）

当初の質問内容を大幅に超えた解説にとても感謝します。
ご縁があればご飯奢らせてください。（うーむ。御大がどこのポジションに所属してるのか興味ありです。）

回答No.7

think49

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 は各要素毎に独立して定義されています。

お礼

ご指摘ありがとうございます。

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

うーむ。。。何をおっしゃってるのかさっぱり。
私はここまで指摘されても理解出来ないレベルのようです。。
大体網羅するのに1年は吹っ飛びそうです。私のレベルだと。

回答No.6

Tacosan

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

a の Content Model は
Transparent, but there must be no interactive content descendant.
とあります. but 以下はさておいて, この transparent は
http://www.w3.org/TR/html5/content-models.html#transparent
にあるように「親要素の 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 においても「そこだけ見ても何を入れることができるのかわからない」要素が存在します. 気付いてない?

お礼

すばらしい！200点満点です。やればできるということを証明してしまいましたね！
非常に建設的な回答をありがとう。HTML5の日本の歴史を数ヶ月、、いや数年早めたと感じます。
-------------------------------------------
<div><a ...><div ...>...</div></a></div>
は OK だが
<p><a ...><div ...>...</div></a></p>
はアウト (自分で考えてみてください).
-------------------------------------------
わかりやすすぎる。。畏敬の念すら覚えます。
きっと仕事の出来る方だとお見受けしました。
数々のご無礼をお許しください。
丁稚奉公したいくらいです。

*******************************************

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

ついでに仕様書の見方も伝授していただきたいですねぇ。
頭がよいひとになれそうだから。

回答No.5

think49

#2 です。訂正。

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

お礼

やっと確信もてました。

aタグはdivタグを子供に持てる。で決まりだと思います。

あとは、
No.1さんが、

「aタグの中にdivタグを入れることは許可されていますか」という質問に対する答えが「これだけではわからない」

と発言している意味が解決すれば万事解決するはず。。。
これってつまり、aタグの中にdivタグが入るケースと入らないケースがある。
という意味だと思うのですが、これが本当だとしたらホラーですよ。

回答No.4

Tacosan

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

補足

すみません。理解しにくかったですね。

>調べればわかる
↑というのは仕様書のどこに書いてあるのかを、
説明して下さいという意味です。

あなたにはわかることが、
私にはわからないから質問させて頂いているのです。

最初から書けばよかったのですが、私は、実は英語を読解できません。
日本の一般レベルの義務教育しかうけていないのです。

http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

上記URLに

「4.6 Text-level semantics」
の項目があります。そして、

「4.6.1 The a element」
と続き、aタグの説明があるように私には見えます。

Categoriesの項目には、

Flow content.
When the element only contains phrasing content: phrasing content.
Interactive content.

とありますが、この部分を訳すと、the element（aタグのこと？）はphrasing content.
Interactive content.だけを含みます。

と書いてあるように見えます。
そして、phrasing content.とは何かと言うと、

http://www.w3.org/TR/html5/content-models.html#phrasing-content
↑（こちらを参照すると）phrasing contentにはdivタグは含まれていないことがわかります。

さらに、
http://www.w3.org/TR/html5/content-models.html#interactive-content
↑（こちらを参照すると）Interactive contentにはdivタグが含まれていないことがわかります。

つまり、私の解釈が正しいことを前提に進めると、
aタグ内にはdivタグを含むことは出来ないという結論になります。

--------------------------
ここまで思考したあとに、No1さんの回答にある、

--------------------
「当該要素がフローコンテントなのかフレージングコンテントなのか (はたまた別の何かなのか)」は考えてもしょうがないのでは?
--------------------
という1文の意味がわからなくなります。

つまり
--------------------
aタグがフローコンテントなのかフレージングコンテントなのかを考えてもしょうがない。
--------------------
と言ってると思いますが、ここで新たな疑問が生まれます。

「では、何を考えればよいのか？」

******************************************
No1さんは下記のようにも言いました。

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

↑この文を見て、私が思ったことは、

aタグの中にdivタグが入るケースと入らないケースがある。
という意味だと思っています。

******************************************

さて、新たな疑問は残ったままです。
---
・個人的に得た回答は「aタグの中にdivタグは含むことは出来ない。」
・No3さんは「入るケースと入らないケースがある。」

回答が食い違ったままです。
さぁ正解はどちらでしょうか。

---
No3さんは調べて回答を得たみたいですが、
私は調べてみて回答を得ましたが、
No3さんと回答が違うようです。

---
No3さんは「調べればわかる」と言っていますが、
それはNo3さんは調べてわかったが、私は調べてもわからなかった。（回答は得たがNo3さんの答えと違う！）

---
調べたのにわからないんですけど、どういうことでしょうか。何か隠してませんか？
情報弱者をイジメてあそんでるだけなんじゃないですか？

回答No.3

Tacosan

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

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

補足

調べればわかることを証明して欲しいですね。

>～できるはずですね.
では第三者は理解できないと思いませんか？

回答No.2

think49

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

回答No.1

Tacosan

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

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

参考URL：

http://www.w3.org/TR/html5/content-models.html

補足

なるほど。

では、html5の場合は、aタグの中にdivタグを入れることは許可されていますか？