HTML5 でのタグのネスト ルールの解析

以下のエディタでは、HTML5タグのネストルール[必読]について詳しく説明しています。編集者はこれが非常に優れていると考えているので、参考として共有したいと思います

前の言葉
HTML5 では、 要素のサブ要素をブロックレベルの要素にすることができます。 、これは過去のルールに違反すると考えられていました。この記事では、html5のタグの入れ子のルールを詳しく紹介します

分類
html5が登場する前は、要素はblock、inline、inline-blockで区別されることが多かったです。 HTML5 では、要素は表示属性によって区別されなくなり、コンテンツモデルによって区別されます。

これは、メタデータ コンテンツ、セクション コンテンツ、見出しコンテンツ、フロー コンテンツ、フレージング コンテンツ、および埋め込みコンテンツに分かれています。どのカテゴリにも属さない要素は浸透していると言われ、複数のカテゴリに属する​​可能性のある要素は混合されていると言われます。

メタデータ コンテンツは、他のコンテンツのパフォーマンスや動作を説明したり、現在のドキュメントと他のドキュメントの間の接続を確立したりするために使用できる要素です

base link meta noscript script style template title

フロー コンテンツは、アプリケーションとドキュメント間の要素です 使用される要素のほとんど

a abbr address area(如果它是map元素的子元素) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text

セクションコンテンツは、タイトルとフッターの範囲を定義するために使用される要素です

記事は別としてnavセクション
見出し要素（見出しコンテンツ）はセクション/章タイトルを定義します

h1 h2 h3 h4 h5 h6
フレージングコンテンツは、段落レベルのテキストをマークするために使用される要素です

a abbr area (マップ要素の子の場合) audio b bdi bdo br button Canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress qruby s samp script select small spam Strong sub sup svg template textarea time u var video wbr text
埋め込み要素（埋め込みコンテンツ）とは、参照する要素、またはドキュメント内の他のリソースに挿入されます

オーディオ キャンバス embed iframe img math object svg video
インタラクティブ要素 (インタラクティブ コンテンツ) は、ユーザーとの対話に特に使用される要素です

オーディオ (controls 属性が設定されている場合) ボタン embed iframe img (usemap属性が設定されている場合) input (type属性がhiddenでない場合) keygen label object (usemap属性が設定されている場合) select textarea video (controls属性が設定されている場合)

sub 要素
の子要素[1] はフロー要素です

、

、

、

、

、

、

、

、 【1.1】子要素は

要素を除くフロー要素

、

【1.2】子要素は要素を除くフロー要素

[1.6] 子要素はフロー要素ですが、

、

、

、セクションコンテンツ、見出しコンテンツは含まれません

【1.7】子要素は

要素で、その後に flow 要素

< ;figure>が続きます。【1.8】子要素は

要素で、その後に flow 要素

<が続きます。 ;filedset>

【2】子要素はstatement要素です

、

、

、

、

、

、

、

、、 、、、、、、、、、、 、、、、、、、、、、 , , 
, 
, 
 [2.1] サブ要素はステートメント要素ですが、それ自体と同じ要素は含まれません
, < ;progress> , 
 【2.2】子要素はステートメント要素ですが、インタラクティブなコンテンツは含まれません 

 

【3】子要素は透明です（親要素で許可されているとおり） ) 子要素が優先します) 
、、

 【3.2】子要素は、なし、要素、または透明にすることができます(親要素によって許可される子要素に従う)