p、form、tableの階層構造

質問

p、form、tableを正しくコーディングしたいと思っています。どの要素が上位（または同位）になるのでしょうか。

特にformとtableの関係はどのように考えればよいでしょうか。formにはinput、tableにはtr、tdと言うように、下位の要素があるので複雑です。

これらに関して詳しいサイトがあれば教えてください。

回答No.9

aqucent · ベストアンサー

> しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。
そうですね。
div要素は「スタイルを指定する」よりも、「ID, クラスによる意味付け」の役割を果たす機会が多いと思います。

#7では、意味づけを分かり易くするためにあえてIDのみを用いましたが、クラスを指定しても良いでしょう。
該当htmlソースの下に同じ段落構成があるのならば、クラスに変更してみて下さい。
一意な意味は持たなくなりますが、意味付けという点においては同じです。

#7では、div要素のIDであえて「"h3_1"～"h3_3"」に分類しましたが、場合によっては同じクラスを指定しても良いと思います。
「3つめの段落」という意味においては、同じ意味合いを持たせた方が統一性があって良いかもしれません。

このように、広義な意味合いを持たせる場合には、IDではなくクラスを用います。
どこまで広義にするかは、クリエイターの考え方次第。
意味付けを適切に定義しておくと、後々の保守が容易になるので、よく考えて決める事をお勧めします。

お礼

ありがとうございました。理解が一つ先に進んだ気がします。

回答No.8

aqucent

#7です。
h3の下の意味段落をインデントするのを忘れていました。

<h3>概要</h3>
<div id="h3_1">
　<p>...東京の年間気温の概要1...</p>
　<p>...東京の年間気温の概要2...</p>
</div>

私の場合、段落はインデントを付けて把握する事が身についています。
連続した空白文字は1つの空白と解釈されるので、インデント文字が複数あっても描画上は問題なく、都合がよいので。

回答No.7

aqucent

> W3Cの段落というのは、形式段落のことなんですね。
「p要素が形式段落か意味段落か」は議論になるぐらい結論の出ていない主題ですが、
私としては最小の節という性質から、「形式段落に近い段落」と解釈しています。
(p要素は内部に改行を持つことを許しているので、厳密には形式段落ではないのですけどね。)

Google検索: 形式段落 p要素
http://www.google.co.jp/search?ie=euc-jp&lr=lang_ja&num=30&q=%b7%c1%bc%b0%c3%ca%cd%ee+p%cd%d7%c1%c7

> 段落には階層構造がないので残念です。
HTMLには意味段落として定義されたものはないので、意味段落を求める方はブロックレベル要素にフラグメント識別子(id)を付けることによって定義する事が多いようです。

> 例えば、「東京都とニューヨークの年間気温変化の比較」というページを作るとします。
この状況で意味段落を定義するとして、私なら以下のようなhtmlソースを書きます。

<h1>東京都とニューヨークの年間気温変化の比較</h1>
<div id="h1">
　<h2>東京の年間気温</h2>
　<div id="h2">
　　<h3>概要</h3>
　　<div id="h3_1">
　　<p>...東京の年間気温の概要1...</p>
　　<p>...東京の年間気温の概要2...</p>
　　</div>
　　<h3>年間気温表</h3>
　　<div id="h3_2">
　　<table>
　　...年間気温表...
　　</table>
　　</div>
　　<h3>年間気温表から読み取れる特徴</h3>
　　<div id="h3_3">
　　<p>...年間気温表から読み取れる特徴1...</p>
　　<p>...年間気温表から読み取れる特徴2...</p>
　　</div>
　</div>
</div>

分かり易いように見出し(h1)に合わせて識別子を定義しましたが、実際にはもっと意味のある名前付けをすると思います。
<div id="h3_2"> はtable要素に識別子を当てても良いですが、この辺は好みですね。

参考URL：

http://fab51.com/info/css_design1.html

お礼

わざわざ見本まで記述していただき、ありがとうございました。Google検索してみますと、p要素については色々な意見があることがわかりました。
ところで、私はdivをスタイルをつけるために使っていました。しかしdivの本当の役割は意味的な区分をマークアップすること・・・と解釈すればよいのですね。

回答No.6

aqucent

#5です。
少し気になったので、再び失礼します。

> 感覚的な概念(例えば、あるパラグラフ中に表を使う)と、正しいコーディングの概念(例えば、1個のセルの中に段落がある)にずれがありまして苦労しています。
「p要素 = 段落」「table要素 = 表」
これは解りますよね？
大辞林によれば、段落とは「長い文章の中の、一つの主題をもってまとまった部分。また、その切れ目。段。節。」とあります。
http://dic.yahoo.co.jp/dsearch?stype=1&dtype=0&dname=0ss&p=%c3%ca%cd%ee

表は文章ではなく論理構造ですから、「段落の中に表が存在するのはおかしい」となります。
反対に、表の中(セル)に文章があれば、表の中に段落が存在してもおかしくはありません。

補足

W3Cの段落というのは、形式段落のことなんですね。段落には『形式的な段落』と、『意味的な段落（いくつかの形式段落で構成され、文中で一つの大きなまとまりになる。）』がありますが、上記の『意味的な段落』を表すタグがないから、色々な問題が出ているような気がします。見出しには階層構造があるのに、段落には階層構造がないので残念です。

例えば、「東京都とニューヨークの年間気温変化の比較」というページを作るとします。
そのときは、h1を「東京都とニューヨークの年間気温変化の比較」とします。
次に、h2を「東京の年間気温」とします。続く段落（『意味的な段落』）で、東京の年間気温についての解説を入れます。その解説の中に東京の年間気温についての「概要」「年間気温表」「年間気温表から読み取れる特徴」などを入れたいと思うのですが（つまり、意味的な段落の中に「表」を入れたいのですが）、これをそのままコーディングすれば間違いということですね。

この場合は、h3に「概要」とし、その内容をpに入れる。次のh3に「年間気温表」としてpは無しで、tableを入れる。次のh3に「年間気温表から読み取れる特徴」とし、その内容をpに入れる。・・・というようになるのでしょうか。

回答No.5

aqucent

> どの要素が上位(または同位)になるのでしょうか。
p, form, table の中では、p要素が最も下位の要素となりますね。
form, table はどちらが上位にあっても問題のない要素です。
(form要素が下位の場合、td要素の下位に置く必要があります)

> これらに関して詳しいサイトがあれば教えてください。
以下が参考になるでしょうか。

INDEX of BLOCK-level Elements
http://www.nextindex.net/web/tips/block.html
Google検索: HTML 内容モデル
http://www.google.co.jp/search?ie=euc-jp&lr=lang_ja&num=30&q=HTML+%c6%e2%cd%c6%a5%e2%a5%c7%a5%eb

回答No.4

koutarou504

どこか使えるかと・・・・・。

http://openlab.ring.gr.jp/k16/htmllint/tagslist.cgi?HTMLVersion=HTML401-Strict

尚、正しくと考えるならば、
文法という規則もですが、
その意味（書き手の意図）も重視される事を、お勧めします。

参考URL：

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

回答No.3

Tacosan

えっと, (HTML の) DTD というのは W3C が出しています. 原本は英語だけど, 日本語もあったような... あ, あったあった. W3C サイトからちょっと探すといくつか出てますね. JIS にもなってるし (JIS TR X 0080:2003). ちなみに「そんなに難しくない」と書きましたが, 書き方に癖があるのでそこは注意.
で, p 要素の中に table を入れるのは今の HTML ではやってはいけないことになっています. まあ W3C でもこの辺の制約 (p の中にブロック要素が入らないので, 段落中に列挙ができないなど) がおかしいことに気付いているようで, 次に出るはずの XHTML 2 では直るはずのようです.
W3C のサイトには HTML チェッカもあるので使ってみてはどうでしょうか?

回答No.2

Tacosan

そんなに難しくないので, 一度 DTD を読んでみてはいかがでしょうか?
結論:
・p, table, form は全てブロック要素である
・p の中に入れることができるのはインライン要素なので table や form (や p) を入れることはできない
・form には「form 以外のブロック要素」を入れることができるので, 当然 p や table を入れることができる
・table の中に直接入れることができる要素は限られているが, 究極的に出てくる td や th にはブロック要素もインライン要素も入れることができる. つまり p も table も form も (td や th の中に入れれば) table の中に入れることができる

お礼

早速回答をいただき、ありがとうございます。
感覚的な概念（例えば、あるパラグラフ中に表を使う）と、正しいコーディングの概念（例えば、１個のセルの中に段落がある）にずれがありまして苦労しています。
DTDというのはW3Cが出しているものでしょうか。もしかして英語でしょうか。時間がある限り挑戦してみたいと思います。

回答No.1

oryaaaaa

tableは使わないでXHTML+CSSで書くようにすれば、悩まずに済みますよ。

補足

formをtableで整形するケースがありまして（私の場合）、このような質問をいたしました。
しかし、できるだけXHTML+CSSで書かなければなりませんね。