たとえば、HTML 4.01 では、
1) 一般に、インライン要素には他のブロック要素を含めることはできません (例: a<span>または<a>を含めることはできません<div>)。ただし、ほとんどのブラウザーは以下のルール 2 のように HTML 構造を変更しないため、このルールはより寛容です。(そして、最近の多くのブラウザーは、タグ<div>内にあるという望ましい結果を処理します。)<a>
2)<p>要素には要素を含めることはできません<p>。<p>前の要素を閉じる前に何かが表示された場合、前の<p>要素はすぐに閉じられます。この規則は、HTML ドキュメントの構造を変更するため、より厳密に見えます。
上記のルールは正確ですか? また、要素に他の要素を含めることができないことを示す他のルールはありますか? （子孫として）。
HTML5について話しているのですか？現時点では、その仕様が他の仕様に取って代わることになっているため、そのまま使用します。
個々の要素については説明しませんが、何か調べる必要がある場合は、次のリファレンスを参照してください。
http://www.w3.org/TR/html5-author/
「コンテンツ モデル」について説明しているセクションでは、
要素の期待される内容の説明
ここにあります: http://www.w3.org/TR/html5-author/content-models.html
特定の要素の仕様でいくつかの例を確認できます。
http://www.w3.org/TR/html5-author/the-html-element.html#the-html-element (html要素):
要素の
head後に続くbody要素。
a(要素上の) 最初のリンクから、aそのコンテンツ モデルがTransparentであることを学習しますが、それはインタラクティブ コンテンツの子孫がない場合のみです。
「透過的」の定義を見ると、aaが親から Content Model を継承していることがわかります。つまり、最初の定義が正しくなく、a実際に を含むことができますがdiv、その親ができる場合に限ります。上記のドキュメントには、ネストされた「透明な」コンテンツ モデル要素の例も含まれています。
a「インタラクティブコンテンツ」モデル要素を含めることはできないため、要素をまったく含めることはできませんbutton。どの要素がクリックにアクティブに応答したかについて競合が発生するため、これは理にかなっています。
span2 番目のリンクspanを見ると、そのコンテンツ モデルが「フレージング コンテンツ」であることがわかります。これは、基本的にテキストと段落レベルのテキストのマークアップです。定義は完全に具体的ではありませんが、ガイドラインが含まれています。
フレージング コンテンツとして分類されるほとんどの要素には、フロー コンテンツではなく、フレージング コンテンツとして分類される要素のみを含めることができます。
divには「フレージング コンテンツ」モデル (「フロー コンテンツ」)がないため、それspanを含めることはできません。これは、spanが上記の規則に従い、他の「フレージング コンテンツ」要素および/または埋め込みコンテンツまたはテキストのみを含む必要があることを意味します。上記のルールが破られている場合、要素の「コンテンツ モデル」の説明に具体的に記載されます ( a「インタラクティブ コンテンツ」に関する要素の特別なルールを思い出してください) span。
br3 番目のリンク はbr、コンテンツ モデルが「空」であることを示しています。残念ながら、W3C にはそのための特定の定義が含まれていませんが、かなり明白だと思います。つまり、子孫をまったく含むことができないということです。テキストノードでさえありません。「空の」コンテンツ モデル要素には終了タグがありません ( as <br>not asと記述します<br></br>)。
あなたの言ったことは誤解を招くものです。HTML にはinline対block要素の概念がありません。これらは CSS スタイルです。ほとんどのブラウザーには、要素のdisplayスタイルのデフォルト設定があり、それがそれぞれ「フレージング」または「フロー」コンテンツ モデルであるかどうinlineかblockに応じて (一般的な規則として、それについて難しいことや速いことは何もありません)、または単に伝統的です。
「フレージング コンテンツ」要素に「フロー コンテンツ」要素を含めることはできないと言いたい場合は、それが仕様に明確に記載されているため、正しいでしょう。これは、 （あなたが示すように）span含むことができないため、実際には機能します。div
しかし、それaを含めるべきではないというのdivは間違いです。 親ができる限りa含めることができます。が に含まれているdiv場合、 を含むことはできません。ただし、または別のに含まれている場合は可能です。aspandivabodydiv
ブラウザーが「寛容」であることは、有効な HTML を作成する時間がない多くの開発者にとって非常に便利ですが、時間をかけたい私たちにとっては苦痛になる可能性があります。あなたが言うように、ブラウザーは通常、「HTML 構造」を変更しません。ブラウザーが変更するのは DOM です。また、Web ベンダーの仕様は、上で投稿した「Web 作成者」の仕様とは少し異なりますが、私たちは作成者です。
pを含むp)これは、私が省略した重要な点のために当てはまります: Context.
この要素を使用できるコンテキスト:
フロー コンテンツが期待される場所。
は「フレージング コンテンツ」であるため、「フロー コンテンツ」ではなく「フレージング コンテンツ」が期待されるため、別のものを a 内に配置できないことpを意味します。pp
HTML5 仕様には膨大な数の要素が含まれているため、ここでそのすべての詳細を説明することはできません。あなたがそれらを具体的に取り上げたので、私は内容spanとa内容について詳しく説明しました. この答えの長さを見てください！divp
あなたがする必要があるのは、仕様自体で疑問がある要素を調べることです。コンテキストとコンテンツ モデルのセクションを見て、要素の使用が有効かどうかを確認してください。
要素がどのように機能するかについて質問がある場合は、仕様を参照してください。要素をどのように使用すべきか(コンテナーとコンテンツに関して)についての質問に答えるには、以下を参照してください。
これにより、要素を含むことができるもの、含むことができるもの、およびいつ含まれるかがわかります。
HTML が有効かどうかについて疑問がある場合は、W3C マークアップ検証サービスをいつでも使用できます。
Chrome を使用している場合は、Chrome インスペクター (F12) を見て、出力 DOM をソース HTML 自体と比較できます。たとえば、Chrome はpDOM を生成するときに、ネストされたタグを自動的に閉じることに気付くでしょう。
編集した投稿に基づいて --
<a>html5 の時点で、ブロック レベルの要素として扱われるようになりました。ページをマークする標準に関係なく、ブラウザは要素を html5 であるかのように扱う可能性が高いため、後方ではなく、そこから作業します。
<a><a>または対話することを意図した要素 (入力/ボタン) を
含めることはできません。(階層に関して) 以上のタグを<hX>含めることはできません。つまり、または または またはを保持することはできません。<h_>X<h3><h1><h2><h3>
そのように記述すると、アウトラインは適切な階層レベルに到達するまでアウトラインを閉じます。
<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2> // starts a new branch of H2s, in terms of outline
<h1></h1>
<h2></h2>
<h3></h3>
<h1></h1> // closes the entire previous branch and all leaves, and starts a new outline
<ul>直下の子孫としてのみs を含むこと<ol>ができます。
s は、他の順序付けられた/順序付けられていない/定義リストを含む、必要なものをすべて保持できます (s またはその他のリストノードを除く)。<li><li><li>
...しかし、<ul>and要素は、最初の世代の子として<ol>のみ持つことができます。<li>
とノード<dl>の s と同じ扱いです。<dt><dd>
残りのほとんどは、常識的なものです (タグ、タグ、タグ、タグ、タグなどに要素を入れないでください<script>) <img>... <br>...<meta>または<legend>、まだねじれが解決されていません ( figure/figcaption は、 などの適切な形式を保持できます<picture>)。