コーディング
本気で学ぶ!HTML入門#05
【HTML入門】要素のカテゴリは配置のルールを示す

「HTML入門」の5回目ですね。
今回から、いよいよ<body>
〜 </body>
で使う要素を学習していきましょう。まずは、それらの要素の配置ルールを知るために「要素のカテゴリー」について学習しましょう。
ちなみに今回は少し複雑な内容ですし演習もありません。大事な内容ではあるのですが、「とりあえず要素を書いて覚えたい」という人は、一旦飛ばしてもらっても大丈夫です。で、配置のル−ルが必要になった時にまた見て頂ければと思います。
目次
要素のカテゴリーとは
HTMLには、要素を分類するためのカテゴリーがあります。このカテゴリーは「どの要素がどの要素の中に配置できるか」などといった配置のルールに使います。
ようは、「この要素の中に、この要素を入れてもOKですが、この要素の中には入れちゃダメですよ」というのを、カテゴリー単位で分類しています。
HTML5より前のHTMLのカテゴリー
HTML5より前のバージョンのHTMLでは、以下の2つのカテゴリーと、その他の要素(前回までに学習したHTMLの基本構造の要素など)があります。
- ブロックレベル要素
- インライン要素
- ブロックレベル要素(Block Level Elements)
-
見出し・段落・表など、文書を構成する基本となる要素で、一つのかたまり(ブロック)に意味や役割を与える要素が分類される。一般的なブラウザでは要素の前後が改行される。
【主なブロックレベル要素】address blockquote div dl fieldset form h1 h2 h3 h4 h5 h6 hr noscript ol p pre table ul
- インライン要素(Inline Elements)
-
主にブロックレベル要素の内容の一部となる要素で、特定の単語や、文章に意味や役割を与える要素や、画像などが分類される。なお、文章自体もインライン要素に分類される。
【主なインライン要素】a abbr b big br cite code dfn em i img input kbd label q s(*) samp select small span strike strong sub sup textarea u(*)
(*):HTML5までは非推奨の要素
という違いがあります。
次回以降、これらの要素を学習していきますので、今は「どの要素がどちらのカテゴリーか」までは覚えなくて大丈夫です。
ただ、以下のルールは覚えておいて欲しいです。
配置のルール
- ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置できる
- インライン要素の中には、他のインライン要素を配置できる
- インライン要素の中に、ブロックレベル要素を配置することは出来ない
例えば、段落を表す「p要素(<p>
)」というブロックレベル要素と、強調を表す「em要素(<em>
)」というインライン要素を使う場合、「em要素」の中に「p要素」を入れることは出来ません。
正:ブロックレベル要素の中にインラインレベル要素を配置
<p><em>今だけ送料無料</em></p>
誤:インラインレベル要素の中にブロックレベル要素を配置
<em><p>今だけ送料無料</p></em>
これが配置のルールになります。
ただ、HTML5では「ブロックレベル要素」、「インライン要素」というカテゴリー分けはなくなります。
え!?
って感じかもですが、この「ブロックレベル要素」、「インライン要素」という分類は比較的わかりやすいですし、今でもCSS(ホームページのデザインを行なう言語)などで使われている考え方なので、知っておくといいと思います。
実際に、次回以降もこれらの分類を踏まえて学習していきます。
HTML5のカテゴリー
HTML5では、先ほどの「ブロックレベル要素」、「インライン要素」というカテゴリーから、7つのコンテンツカテゴリとセクショニング・・ルートという計8つのカテゴリーに変更されました。
- メタデータ・コンテンツ:文書情報コンテンツ
- フロー・コンテンツ:一般コンテンツ
- ヘディング・コンテンツ:見出しコンテンツ
- セクショニング・コンテンツ:セクショニングコンテンツ
- フレージング・コンテンツ:文書内コンテンツ
- エンベッディッド・コンテンツ:組み込みコンテンツ
- インタラクティブ・コンテンツ:対話型コンテンツ
です。
しかも、多くのの要素は1つのカテゴリーにのみ属しているわけじゃなく、複数のカテゴリーに属していたりもします。また、どのカテゴリーにも属さない要素なんかもあります。
ただ、今の段階ではまだ要素もそれほど学んでないですし、この考え方は少し複雑なので、深く考えず「こんなカテゴリー分けなんだ」と軽く見ておいてください。
- メタデータ・コンテンツ(Metadata content)
-
メタデータやCSS、JavaScript(サイトに動きをつけるプログラム言語)を指定する要素など。基本的には画面に表示されない要素。
【主な要素】base command link meta noscript script style title
- フロー・コンテンツ(Flow content)
-
body要素の中なら基本的にどこにでも配置できる要素。ほとんどの要素はこのフロー・コンテンツになる。
【主な要素】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 hr i iframe img input ins kbd keygen label main 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
- セクショニング・コンテンツ(Sectioning content)
-
章・節・項のようにアウトライン(階層構造)を形成する要素。
【主な要素】article aside nav section
- ヘディング・コンテンツ(Heading content)
-
見出しを示す要素。
【主な要素】h1 h2 h3 h4 h5 h6
- フレージング・コンテンツ(Phrasing content)
-
ドキュメントのテキスト範囲を示す要素。従来のインライン要素に近い概念のカテゴリー。
【主な要素】a (フレージング・コンテンツのみを含んでいる場合) abbr area (map 要素の子孫の場合) audio b bdi bdo br button canvas cite code command 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 textarea time var video wbr Text
- エンベッディッド・コンテンツ(Embedded content)
-
外部のリソースや、HTML以外の言語で生成されたコンテンツを埋め込む要素。
【主な要素】audio canvas embed iframe img math object svg video
- インタラクティブ・コンテンツ(Interactive content)
-
ユーザーが何かしらの操作(クリックなど)をすることができる要素。
【主な要素】a audio (controls 属性が存在している場合) button details embed iframe img (usemap 属性が存在している場合) input (type 属性が Hidden 状態でない場合) keygen label menu (type 属性が toolbar 状態の場合) object (usemap 属性が存在している場合) select textarea video (controls 属性が存在している場合)
- セクショニング・ルート(Sectioning roots)
-
独自のアウトライン(階層構造)を持つことが出来る要素。セクショニング・ルート内のセクションや見出しは、祖先のアウトラインには影響を及ぼさない。
【主な要素】blockquote body details fieldset fiqure td
これらがHTML5でのカテゴリーです。
そしてこれらのカテゴリーを使って配置のルールを決めています。
配置のルール(コンテンツ・モデル)
HTML5では、各要素ごとに中に配置できるカテゴリや要素が決まっています。これを「コンテンツ・モデル」と呼んでいます。
例えば、段落を表す「p要素(<p>
)」のコンテンツ・モデルは「フレージング・コンテンツ」です。
つまり、<p>
~ </p>
の中に入れるのは、「フレージング・コンテンツ」に属した要素のみということです。
正:p要素の中にフレージング・コンテンツの要素
<p><em>今だけ送料無料</em></p>
誤:p要素の中にフレージング・コンテンツ以外の要素
<p><header>今だけ送料無料</header></p>
という感じです。
なので、何か要素を使うときには、その要素のコンテンツ・モデルが何かを調べて、そのカテゴリーに属した要素のみを使えば問題ありません。
ですが、コンテンツ・モデルには、カテゴリー以外のものもあるのです。
特定の要素に限定されているパターン
コンテンツ・モデルの中には「特定の要素しか入れない」と要素を限定されているパターンがあります。例えば、箇条書きを表す「ul要素(<ul>
)」という要素があります。この「ul要素」のコンテンツ・モデルは・・・。
「0個以上のli要素」です。
つまり、「ul要素」の子要素(直接挟める要素)は、リスト項目を表す「li要素」という要素のみということです。
正:ul要素の子要素にli要素
<ul>
<li>会社概要</li>
<li>サービス一覧</li>
<li>スタッフ</li>
<li>お問い合せ</li>
</ul>
誤:ul要素の子要素にli要素以外の要素
<ul>
<p>会社概要</p>
<p>サービス一覧</p>
<p>スタッフ</p>
<p>お問い合せ</p>
</ul>
このように、中に入れる要素が限定されているパターンのコンテンツ・モデルもあります。
トランスペアレント
ほかにも、「トランスペアレント」といって、親要素(自分を直接挟んでいる要素)を継承するというコンテンツ・モデルもあります。
例えば、リンクを生成する「a要素(<a>
)」という要素があるのですが、この「a要素」のコンテンツ・モデルがこの「トランスペアレント」になります。
例えば下記のHTMLの場合を見てみましょう。
<p>
<a href="#">リンク先に<i>ピョン!</i></a>
</p>
上記の場合、「トランスペアレント」である「a要素」は親要素である「p要素」を継承します。「p要素」のコンテンツ・モデルは「フレージング・コンテンツ」ですので、「フレージング・コンテンツ」の、声や雰囲気を表す「i要素」は配置可能です。
従って、上記の配置は正しい書き方です。
続いて、下記のHTMLも見てみましょう。
<section>
<a href="#">
<p>リンク先へ</p>
</a>
</section>
上記の場合、「トランスペアレント」である「a要素」は親要素の、章を表す「section要素」を継承します。「section要素」のコンテンツ・モデルは「フロー・コンテンツ」ですので、「フロー・コンテンツ」である「p要素」は配置可能です。
従来は、インライン要素であった「a要素」は、ブロックレベル要素である「p要素」を中に配置することは出来ませんでしたが、HTML5では、上記のようなケースでは配置可能になります。
ただ、下記のようなケースは配置できません。
<em>
<a href="#">
<p>リンク先へ</p>
</a>
</em>
上記の場合「a要素は」、「em要素」のコンテンツ・モデル「フレージング・コンテンツ」を継承します。「p要素」のコンテンツ・モデルは「フロー・コンテンツ」ですので配置できません。
このように、少しややこしいですが親要素を継承するコンテンツ・モデルもあります。
ほかにも、子孫に特定の要素を入れてはいけないパターンなどの例外パターンがありますので、要素を配置するときは、コンテンツ・モデルを確認するようにしましょう。
また、「自分自身(要素自身)がどの要素の中に配置できるのか」という概念もあり、これを「コンテキスト」といいます。
まとめ
今回は、HTMLの要素のカテゴリーについて学習しました。このカテゴリーはどの要素にどの要素を配置できるかを示した配置ルールに活用されています。
なお、HTML5と、HTML5より前では、カテゴリ−概念が変わっている事も押えておきましょう。
それでは次回から、ブロックレベル要素のタグを使って行きましょう。