こんにちは。中村です。HTML5でブロック要素とインライン要素という概念が廃止になったのですが、それに変わるコンテンツモデルがややこしいので、まとめました。
この記事の目次
HTML5って？
W3C(ワールドワイドウェブ)が勧告する5番目のハイパーテキストマークアップ言語（HTML）のDTD（Document Type Definition）。記述の仕方の定義です。
なぜ、定義するのかというと、皆がウェブ上で色んな方言で話すと収集がつかないから、共通語で話そうよってイメージです。
HTMLの役割は、文書の構造と意味を与えることです。セマンティックウェブと言われるものですね。綺麗に整形するのはCSSのお仕事です。
セマンティックなウェブとは
ウェブは人間が読むための「文書のウェブ」から、様々なデータを自在に発見して利用できる「データのウェブ」へと向かいます。セマンティック・ウェブと呼ばれる分野では、このデータのウェブを実現するために、表現のモデルや交換・共有を可能にするオントロジー、そして推論や頼性検証といった各レベルでの技術開発が進められています。
【出典：メタ情報とセマンティック・ウェブ・http://www.kanzaki.com/docs/sw/・2015/11/08】
コンピューターが意味を理解しやすいように、文章に意味や役割をマークアップしていく、というイメージですね。
コンテンツモデルとは・・・
HTML要素は、要素のコンテンツモデルで説明される要求に一致するコンテンツを持たなければならない。
【出典：3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳・http://momdo.github.io/html5/dom.html#content-models・2015/11/08】
これからのマークアップでは、要素の意味に適したコンテンツモデルの設定を行う必要があります。その要素に含まれる情報の持つ意味を、より明瞭にユーザーに伝えるためです。
それでは、コンテンツモデルの種類を見ていきましょう
コンテンツモデルの種類
コンテンツモデルの種類には、メタデータコンテンツ、フローコンテンツ、セクショニングコンテンツ、ヘディングコンテンツ、フレージングコンテンツ、エンベディッドコンテンツ、インタラクティブコンテンツがあります。
メタデータコンテンツ
メタデータのコンテンツには、そのWebページの要素情報と題名、見栄えや後述するコンテンツがどういった挙動をするのかの設定、また他のWebページとどのような関係性にあるのかの情報などが含まれます。
base , link , meta , noscript , script , style , template , title
フローコンテンツ
body要素に包含される要素の多くは、フロー・コンテンツになります。そのほとんどが別のコンテンツにも関わっているので、基本的にbody要素内で利用される要素は全て、フローコンテンツにも含まれていると判断して問題なさそうです。
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 , テキスト
セクショニングコンテンツ
Webページの文書構造とか、他のコンテンツを包含するコンテンツにあたります。要するに「記事に関するところをまとめたよ！」とか「ここはナビゲーションだよ！」といった大枠のくくりですね。
article , aside , nav , section
ヘディングコンテンツ
包含される親コンテンツのタイトルや見出しにあたるコンテンツです。重要な項目の題名、つまり見出しですね。
h1 , h2 , h3 , h4 , h5 , h6
フレージングコンテンツ
フローコンテンツの中に含まれる要素で、その中でも文字列の意味付けや説明にあたる要素です。HTML4で言うところのインライン要素に近い要素です。
a , abbr , area（map要素の子孫の場合） , 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 , q , ruby , s , samp , script , select , small , span , strong , sub , sup , svg , template , textarea , time , u , var , video , wbr , テキスト
エンベディッドコンテンツ
画像や動画などを読みこんだりする要素群です。
audio , canvas , embed , iframe , img , math , object , svg , video
インタラクティブコンテンツ
ユーザーがアクションを行える要素です。リンクをクリックしたりテキストを入力できるなどの機能を備えた要素がこれにあたると思ってください。
a , audio（controls属性が存在する場合） , button , embed , iframe , img（usemap属性が存在する場合） , input（type属性がhidden状態でない場合） , keygen , label , object（usemap属性が存在する場合） , select , textarea , video（controls属性が存在する場合）
終わりに
HTMLはマークアップ言語なので、これからはそれぞれのタグの知識をしっかりと理解しないと、ちゃんとしたWebページは作れないな。と思いました。本当、とことん勉強が必要だと痛感いたしました。。。