コーディング

本気で学ぶ！HTML入門#05

【HTML入門】要素のカテゴリは配置のルールを示す

HTML入門#05

「HTML入門」の5回目ですね。
今回から、いよいよ<body> 〜 </body>で使う要素を学習していきましょう。まずは、それらの要素の配置ルールを知るために「要素のカテゴリー」について学習しましょう。

ちなみに今回は少し複雑な内容ですし演習もありません。大事な内容ではあるのですが、「とりあえず要素を書いて覚えたい」という人は、一旦飛ばしてもらっても大丈夫です。で、配置のル−ルが必要になった時にまた見て頂ければと思います。

目次

  1. 要素のカテゴリーとは
  2. HTML5より前のHTMLのカテゴリー
  3. HTML5のカテゴリー
  4. まとめ

要素のカテゴリーとは

HTMLには、要素を分類するためのカテゴリーがあります。このカテゴリーは「どの要素がどの要素の中に配置できるか」などといった配置のルールに使います。

ようは、「この要素の中に、この要素を入れてもOKですが、この要素の中には入れちゃダメですよ」というのを、カテゴリー単位で分類しています。

HTML5より前のHTMLのカテゴリー

HTML5より前のバージョンのHTMLでは、以下の2つのカテゴリーと、その他の要素（前回までに学習したHTMLの基本構造の要素など）があります。

  1. ブロックレベル要素
  2. インライン要素
ブロックレベル要素（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. メタデータ・コンテンツ：文書情報コンテンツ
  2. フロー・コンテンツ：一般コンテンツ
  3. ヘディング・コンテンツ：見出しコンテンツ
  4. セクショニング・コンテンツ：セクショニングコンテンツ
  5. フレージング・コンテンツ：文書内コンテンツ
  6. エンベッディッド・コンテンツ：組み込みコンテンツ
  7. インタラクティブ・コンテンツ：対話型コンテンツ

です。
しかも、多くのの要素は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より前では、カテゴリ−概念が変わっている事も押えておきましょう。

それでは次回から、ブロックレベル要素のタグを使って行きましょう。

HTML入門#06

【HTML入門】p要素(<p>)で段落の範囲を指定してみよう！

  • date_range