HTML5ではインライン要素・ブロック要素という概念がなくなった。 なくなっただけではなく、代わりに、何をどのタグの中に入れられるのかを定義する別の方法(コンテンツモデル)が規定された。 （※「コンテンツモデル」とは、「その要素内にどんなカテゴリに属しているコンテンツを入れることが出来るかの定義」の事。）
各要素は、それぞれ以下のカテゴリに分類されている（重複所属可）
基本的なカテゴリ(分類)は以下
- メタデータ・コンテンツ
- フロー・コンテンツ
- セクショニング・コンテンツ
- ヘッディング・コンテンツ
- フレージング・コンテンツ
- エンベッディッド・コンテンツ
- インタラクティブ・コンテンツ
※他に「パルパブル・スクリプトサポート・トランスペアレント・セクショニングルート・フォーム関連・リステッド・サブミッタブル・リセッタブル・リアソシエイタブル・ラベラブル」という分類も定義されているとか。
各カテゴリの定義
※他に「パルパブル・スクリプトサポート・トランスペアレント・セクショニングルート・フォーム関連・リステッド・サブミッタブル・リセッタブル・リアソシエイタブル・ラベラブル」という分類も定義されているとか。
| メタデータ・コンテンツ （Metadata content） |
文書情報や他の文書との関係を定義するもの |
|---|---|
| フロー・コンテンツ （Flow content） |
子孫にテキストなどを持つもの |
| セクショニング・コンテンツ （Sectioning content） |
見出しと概要を付けられるもの |
| ヘッディング・コンテンツ （Heading content） |
セクションの見出しとなるもの |
| フレージング・コンテンツ （Phrasing content） |
段落などの中に含まれる文節・語句など |
| エンベッディッド・コンテンツ （Embedded content） |
文書に他のリソースを埋め込むもの |
| インタラクティブ・コンテンツ （Interactive content） |
ユーザーによる操作に対応するもの |
各カテゴリに属するタグ一覧
| メタデータ コンテンツ |
base command link meta noscript script style title |
|---|---|
| フロー コンテンツ |
a abbr address area (map要素の子孫だった場合) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (scoped 属性が存在している場合) sub sup svg table textarea time ul var video wbr Text |
| セクショニング コンテンツ |
article aside nav section |
| ヘッディング コンテンツ |
h1 h2 h3 h4 h5 h6 hgroup |
| フレージング コンテンツ |
a (フレージングコンテンツのみを含んでいる場合) abbr area (map要素の子孫の場合) audio b bdi bdo blockquote br button canvas cite code command datalist del (フレージングコンテンツのみを含んでいる場合) dfn em embed i iframe img input ins (フレージングコンテンツのみを含んでいる場合) kbd keygen label map (フレージングコンテンツのみを含んでいる場合) mark math menu meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text |
| エンベッディッド コンテンツ |
audio canvas embed iframe img math object svg video |
| インタラクティブ コンテンツ |
a audio button details embed iframe img (usemap属性が存在している場合) input (type属性がHidden状態でない場合)keygen label (type属性がtoolbar状態の場合) object (usemap属性が存在している場合) select textarea video (controls属性が存在している場合) |
| セクショニング ルート |
blockquote body details fieldset figure td |
自分が記事中で使いそうなタグに入れられる要素一覧
| h1 h2 h3 h4 h5 h6 | フレージングコンテンツ |
|---|---|
| blockquote div | フローコンテンツ |
| p pre | フレージングコンテンツ |
| dl | dt dd |
| dt dd | フローコンテンツ |
| ul ol | li |
| li | フローコンテンツ |
| table | caption, colgroup, thead, tbody, tr, tfoot, script, template |
| tr | th td |
| th td | フローコンテンツ |
| fieldset | legend フローコンテンツ |
| legend | フレージングコンテンツ |
| iframe | テキスト |
| a | 親要素を継承 |
| img | (規定なし？) |
※とほほのWWW入門を参考にさせて頂きました。 すべてのタグについて詳しく知りたい方はHTMLリファレンスがとても便利ですね、ありがとうございますm(_ _)m
例えば ☆見出し文字(h1-h6)の中に入れられるのはフレージング要素だけなので、フレージング要素に所属している
a (フレージングコンテンツのみを含んでいる場合) abbr area (map要素の子孫の場合) audio b bdi bdo blockquote br button canvas cite code command datalist del (フレージングコンテンツのみを含んでいる場合) dfn em embed i iframe img input ins (フレージングコンテンツのみを含んでいる場合) kbd keygen label map (フレージングコンテンツのみを含んでいる場合) mark math menu meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text
だけが入れられるということになる。 ☆見出しタグ(h1-h6)に入れられるのはフレージング要素だけなので p や div は入れられない。 ☆ p の中に入れられるのはフレージング要素だけなので、div h1-h6 hr ol ul dl p pre table fieldset 等は入れられない。 ☆ a は親要素のコンテンツモデルを継承するので、div の中にある a はほとんどのタグを入れられるが、 p の中にある a は、 p の中に入れられるものと同じものしか入れられない。
インライン要素とブロック要素の概念がなくなって便利になった、と思ったら、ちゃんと理解しようとすると、前より複雑になった感が・・・orz 全部を覚えられないので、その都度、疑問に思った時点でリファレンスを引くという感じですかね。。。
これらは、中に入れられるタグの規定なので、それぞれのタグ自身がインライン要素であるかブロック要素であるかは自由に設定できるようになった、ということですね。 a 要素をブロック化出来ることで、かなりシンプルに書けるようになった気がします。。。
コメント