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

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

前の言葉
HTML5 では、3499910bf9dac5ae3c52d5ede7383485 要素のサブ要素をブロックレベルの要素にすることができます。 、これは過去のルールに違反すると考えられていました。この記事では、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】子要素は61b85035edf2b42260fdb5632dc5728a要素を除くフロー要素

15221ee8cba27fc1d7a26c47a001eb9b、c787b9a589a3ece771e842a6176cf8e9
【1.2】子要素はf5d188ed2c074f8b944552db028f98a1要素を除くフロー要素

63bd76834ec05ac1f4c0ebbeaafb0994 ;
【1.3】子要素はフロー要素ですが、ff9c23ada1bcecdd1a0fb5d5a0f18437要素は含まれません

ff9c23ada1bcecdd1a0fb5d5a0f18437
【1.4】子要素はフロー要素ですが、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、は含まれません61b85035edf2b42260fdb5632dc5728a要素

1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、61b85035edf2b42260fdb5632dc5728a
【1.5】子要素はフロー要素ですが、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、セクションコンテンツ、見出しコンテンツは含まれません。

73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38e
[1.6] 子要素はフロー要素ですが、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、208700f394e4cf40a7aa505373e0130b、セクションコンテンツ、見出しコンテンツは含まれません

af86dc873577d6f0c66cf51d3ee9df1f 要素で、その後に flow 要素

< ;figure>が続きます。【1.8】子要素は e911751791aa3ba95dc724e2fb905976 要素で、その後に flow 要素

51b51d673c73f9a887e85a7e1e934dee, be6d67dae90cc1ad6469079e163d0939, e911751791aa3ba95dc724e2fb905976, 2e1cf0710519d5598b1f0f14c36ba674
[2.1] サブ要素はステートメント要素ですが、それ自体と同じ要素は含まれません

7f9d788ef50b059a7f76f3d2e4ccc9d1, < ;progress> , 49c6123c49c6be380cb91db06cd3bfa9
【2.2】子要素はステートメント要素ですが、インタラクティブなコンテンツは含まれません

bb9345e55eb71822850ff156dfde57c8

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

426be984ffbbb815d7d88e3543a85d91、823db3943044a0a9a620ada8d4b1d965、dab9f699790ab0922e596ecb9f6677d5
【3.1】子要素は透明です(親要素によって許可される子要素に従う)が、インタラクティブな要素は含まれません(インタラクティブコンテンツ)

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

273238ce9338fbb04bee6997e5552b95 ;

【4】子要素はありません

f32b48428a809b51f04d3228cdf461fa、0c6dc11e160d3b678d68754cc175188a、37fcc81822f151c26d66e5caf9953670、a1f02c36ba31691bcfe87b2722de723b、d8e2720730be5ddc9c2a3782839e8eb6、0c68fef83818661b6da588c77ca3985e、e02da388656c3265154666b7c71a8ddc、4e5649663b631194961918a73cea174f、ff6d136ddc5fdfeffaf53ff6ee95f185
【4.2】子要素はなくてもよいし、73de882deff7a050a357292d0a1fca94、d477f9ce7bf77f53fbcf36bec1b69b7a要素でもよい。

5c69336ffbc20d23018e48b396cdd57a

【4.3】 子要素はなくてもよく、5a07473c87748fb1bf73f23d45547ab8、5b7a15bed8615d1b843806256bebea72、または3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a要素である可能性があります

221f08282418e2996498697df914ce4e

【4.4】 子要素はなくてもよいし、5a07473c87748fb1bf73f23d45547ab8、あるいは3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a要素でもよい

5b7a15bed8615d1b843806256bebea72

【4.5】子要素にはいいえ、5a07473c87748fb1bf73f23d45547ab8 要素にすることができます

fc86e7b705049fc9d4fccc89a2e80ee3

【4.6】子要素は None にすることも、9bf7cbf2c39baa37076a22499de2f6ed 要素にすることもできます

b97864c2e0ef2353a16c4d64c7734e92、39000f942b2545a5315c57fa3276f220

【4.7】子要素はなしでもよいし、581cdb59a307ca5d1e365becba940e05、d477f9ce7bf77f53fbcf36bec1b69b7a要素でもよい

879b49175114808d868f5fe5e24c4e0b

【4.8】子要素は、 a34de1251f0d9fe1e645927f19a896e8、または 3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a 要素

92cee25da80fac49f6fb6eec5fd2c22a、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845

【4.9】子要素no にすることも、a34de1251f0d9fe1e645927f19a896e8、b4d429308760b6c2d20d6300079ed38e、または 3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a 要素にすることもできます

【5】子要素は 165ce83cfd62d7f5daa3cc4a4085ce33、879b49175114808d868f5fe5e24c4e0b、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a、または 3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a 要素

f5d188ed2c074f8b944552db028f98a1

【 6】子要素はテキストコンテンツです

4750256ae76b6b9d804861d8f69e79d3

【6.1】子要素にはコンテンツなし、またはテキストコンテンツを含めることができます

5a07473c87748fb1bf73f23d45547ab8

概要

各要素の詳細なネストについてルールは で紹介されています。詳細は前のセクションで説明します。この部分は主によく使われるタグのネストルールをまとめています
【注意】背景が濃い灰色のテキストにマウスを置くと、タイトルに要素に含まれるタグが表示されます【1】4a249f0d628e2318394fd9b75b4636b1、< ;h2> ;、

、

、

、

、

の子要素はステートメント要素です

【2】

、

1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074dはネストできません

【3】3499910bf9dac5ae3c52d5ede7383485の子要素は透明ですが（親要素で許可されている子要素に従います）、インタラクティブな要素（インタラクティブなコンテンツ）は含まれません。

【 4】ff9c23ada1bcecdd1a0fb5d5a0f18437 はネストできませんff9c23ada1bcecdd1a0fb5d5a0f18437

【5】bb9345e55eb71822850ff156dfde57c8 子要素はステートメント要素のため、ネストできません

【6】1033916f4fcf0596f3019c5f509a3ce8 をネストすることはできませんf5d188ed2c074f8b944552db028f98a1

【7】73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38eは1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、セクションコンテンツ、見出しコンテンツにはネストできません

【関連推奨事項】

1. 無料のh5オンラインビデオチュートリアル

2. HTML5完全版マニュアル

3. HTML5ビデオタグの詳細説明

4. HTML5がサポートしていないタグと新しいタグの詳細説明

以上がHTML5 でのタグのネスト ルールの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。