開始タグと終了タグについて

開始タグと終了タグについて


ものすごく初歩的な質問で失礼します。


<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div class="main-top-img">
</div>
<div class="main-middle-img">
<div id="main-contents">
<div class="text">
<h2 class="title"></h2>
<p class="text"></p>
<h3 class="subtitle">
<p class="text"></p>
</div>
</div>
<div class="main-bottom-img">
</div>
<div id="footer">
</div>
</div>

などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。


それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか？？

No.4 ベストアンサー 回答者： yyr446 回答日時： 2010/09/14 12:45

ブラウザーのソース表示では見にくいですね、

　Firefox　＋　Firebug
を使うと、とっても便利です。

http://mozilla.jp/firefox/

https://addons.mozilla.org/ja/firefox/addon/5165/

この回答へのお礼

Firebug、さっそくインストールさせてもらいました。
うわ～これすごいですね！

こういう見方ができるソフトがあるんですね。
直感的理解の助けとなりそうです。

自分のような初心者に優しいソフト教えていただきありがとうございました(>_<)

お礼日時：2010/09/14 16:38

No.5 回答者： D-Matsu 回答日時： 2010/09/14 12:59

「入れ子構造」を勉強すると良いかと思います。

参考URL：http://ja.wikipedia.org/wiki/ネスティング

この回答へのお礼

プログラミングに関しての話は自分には少し難しかったですが、入れ子としての考え方にはとてもイメージが沸いて、理解の助けになりました。

マトリューシュカなんですね！

ありがとうございました(>_<)

お礼日時：2010/09/14 16:34

No.3 回答者： Tacosan 回答日時： 2010/09/14 11:43

開始タグから見ると, 直後の「開始タグに対応していない終了タグ」に対応する.

逆に終了タグから見ると, 直前の「終了タグに対応していない開始タグ」に対応する.
なお, 細かいことですが「<div>要素」という表現は「要素」と「タグ」を混同したものであって正しくありません. 「要素」は「開始タグから (対応する) 終了タグまで」を表す (あるいは「『開始タグ』や『終了タグ』がそれぞれの要素の開始や終了を意味する」) ので, この文脈では「div要素」と呼ぶべきです.

この回答へのお礼

詳細な定義付けを教えて下さり、ありがとうございました！

まだまだこれから細かいところも理解できるようになりたいので、要素とタグの指摘ありがたかったです(>_<)

さっそくの回答とても助かりました。

お礼日時：2010/09/14 16:41

No.2 回答者： yambejp 回答日時： 2010/09/14 11:32

＞どこがその要素の終了タグなのか分からなくなります。

編集するエディタや、参照するブラウザの機能で確認するといいでしょう

どうしてもという場合は

<div id="container">
・・・・
</div><!--container-->

的なダミータグをいれる工夫もあります

この回答へのお礼

当方Dreamweaverを使っているのですが、その機能の中で「無効なマークアップがあります」と指摘さててしまったのが今回質問させていただく理由でした。

ダミータグの提案、ありがたく使わせてもらいます！

さっそくの回答とても助かりました。

お礼日時：2010/09/14 16:44

No.1 回答者： cowtstsu 回答日時： 2010/09/14 11:16

タブやスペースを入れると見やすくなります、

ルールは、終了タグの直前に書いた開始タグが適応されます

あなたの例文では、こうなります

<div id="container">
　<div id="header">
　</div>
　<div id="menu">
　</div>
　<div class="main-top-img">
　</div>
　<div class="main-middle-img">
　　<div id="main-contents">
　　　<div class="text">
　　　　<h2 class="title"></h2>
　　　　<p class="text"></p>
　　　　<h3 class="subtitle">
　　　　<p class="text"></p>
　　　</div>
　　</div>
　　<div class="main-bottom-img">
　　</div>
　　<div id="footer">
　　</div>
　</div>

と、言う具合です、ちなにみあなたの例では、一番最後に</div>が要りますよ、一番初めの開始タグの終了タグがありません

この回答へのお礼

＞終了タグの直前に書いた開始タグが適応されます

そ、そうだったのか！！
なんだか言われるまでテンパリ続けていたので目から鱗です。

ず～～と開始タグばかりに目がいっていたので、混乱していました。

逆転の発想ありがとうございました！

とても理解が深まりました！

お礼日時：2010/09/14 16:48