新しい仲間のためのHTMLタグのネストルール詳細まとめ

最近、HTMLの勉強をし直しているのですが、改めてHTMLを理解することができました。こいつを甘く見てはいけない！全てのWebページはこいつがベースになっているのだ。ここでは、HTMLタグのネストルールについて詳しくまとめてみましたので、ご参考になれば幸いです。
XHTMLには、div, ul, li, dl, dt, dd, h1~h6, p, a, addressa, span, strong ......といったたくさんのタグがあります。これらのタグを使ってページ構造を構築する場合、無限に入れ子をすることができますが、入れ子には一定のルールがあります。しかし、入れ子には一定のルールがあり、好き勝手に入れ子にしていいわけではありません。やはりXHTMLはXMLではないのです。
XHTMLという言語では、ulタグはliを含み、dlタグはdtとddを含むということは誰でも知っています。これらの固定タグのネストルールは非常に明確です。しかし、他にもh1、div、p......といったように、別々のタグがあり、それらは結びついていないのです。では、これらのタグのネストルールは一体どうなっているのでしょうか？今日はこのテーマについてお話ししましょう。
XHTMLタグのネストルールに関しては、XHTMLタグには2つのタイプがあることを知っておく必要があります。
1つはブロックレベル要素（ブロック）と呼ばれるもの
インライン要素（inline、多くの人がこう呼ぶ：inline, in-line, line-level, など）と呼ばれるクラス。
ブロックレベル要素とインライン要素の分離の基準は簡単で、次の2行のコードをbodyタグに入れることです。 

ブラウザのレンダリング。
ディブ1
ディブ2
ページにレンダリングされた 2 つの div は 2 行のスペースを占め、フロート (float) などの設定がない限り、どちらも隣になく、独自の行を支配しています - しかし、このようなタグを見るたびに、それをこう呼ぶことができます: block です。
bodyタグの中にも、次の2行のコードを入れてください。 

ブラウザのレンダリング。
スパン1 スパン2
今回は、2つのスパンが一列に並んで、仲良く、仲良く、和やかに......こんなタグの振る舞いを、インライン要素と呼ぶことにしましょう。
ブロックレベル要素とインライン要素の違いについて。
-ブロック-レベル要素は一般に、サイトのアーキテクチャやレイアウトの構築、コンテンツのホスト......に使用されます。これらのような大きな物理的な仕事は、ブロック-レベル要素の一部であり、次のようなタグが含まれます。
address, blockquote, center, dir, div, dl, dt, dd,fieldset、form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
- インライン要素は一般的に、ウェブサイトコンテンツの細部または一部で、"強調、スタイルの区別、上付き、下付き、anchor"などに使用されます。以下のタグはすべてインライン要素です。
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, U, var tt, U, var
- ブロック要素とインライン要素は、以下のコードで相互に変換することができます。
display: block; /* ブロック要素に変換します */。
display: inline; /* インライン要素へ */
- ブロック要素とインライン要素では、CSSを呼び出すためのルールが異なります（この記事はタグのネストに関するものなので、この点についての説明は省きます）。
ブロック要素とインライン要素について簡単に紹介した後、XHTMLタグのネストルールについて説明します。
1. ブロック要素はインライン要素やいくつかのブロック要素を含むことができますが、インライン要素はブロック要素を含むことができず、他のインライン要素のみを含むことができます。
<div><h1></h1><p></p></div> -- はい。
<a href="#"><span></span></a> -- はい。
<span><div></div></span> -- 間違えています。
2. 2. ブロックレベル要素は <p> 内に配置することはできません。
<p><ol><li></li></ol></p> -- 間違えています。
<p><div></div></p> -- Re.
3. インライン要素のみを含むことができ、それ以上のブロックレベル要素を含むことができないいくつかの特別なブロックレベル要素があり、これらの特別なタグは次のとおりです。
h1、h2、h3、h4、h5、h6、p、dt
4. li は div タグを含むことができる - これは別に記載する必要はないのですが、ウェブ上では多くの人が少し混乱しているので、ここで少し説明します。
liタグもdivタグもコンテンツのコンテナであり、地位は同等、階層はない（例：h1、h2）。重要なのは、liタグはその親であるulやolまで収容できるのに、なぜliはdivを収容できないと考えるのでしょう？liをそんなに小難しく考えないでください、liをやせっぽちと見ないでください、実はliは大きな心を持っているのです．
5. ブロック-レベル要素にはブロック-レベル要素を、インライン要素にはインライン要素を並べる。
<div><h2></h2><p></p></div> -- はい。
<div><a href="#"></a><span></span></div> -- はい。
<div><h2></h2><span></span></div> -- 間違えている