はじめに…

今回はHTML5のコンテンツ・モデルについて触れていこうと思います。

まずHTML5とは、HTMLのバージョン5、改訂第5版のことです。

初期のHTML1が開発されたのが1993年、それからバージョンアップを重ね、2014年のHTML5が発表されました。現在ではホームページ制作に欠かせないものになっています。

題名でふれたコンテンツ・モデルとはHTML5からブロックレベル要素・インラインレベル要素を廃止し、新たに導入された定義のことです。

ブロックレベル要素・インラインレベル要素とは

ブロックレベル要素

ブロックレベル要素は、<body>要素内のみ現れます。見出し・段落・表など文章を構成する基本となる要素で1つのブロック(かたまり)として認識されます。 また、他のブロックレベル要素やインラインレベル要素を配置することができます。

<p><strong> テキストの強調 </strong></p>

このような感じですね。

また、ブロックレベル要素には以下のものがあります。

<address> <blockquote> <center> <div> <dl> <fieldset> <form> <h1>-<h6> <hr> <noframes> <noscript> <ol> <p> <pre> <table> <ul>

インラインブロック要素

インラインブロック要素は、主にブロックレベル要素の内容として用いられる要素です。文章の一部のように扱われ、例えば<p>要素の中の<strong>要素のように段落の中の一部を強調するような使われ方をする要素です。また、インライン要素の中にブロック要素を配置することはできません。

<strong><p>正しく表示されません</p></strong>

また、インラインレベル要素には以下のものがあります。

<a> <abbr> <acronym> <b> <basefont> <bdo> <big> <br> <cite> <code> <dfn> <em> <font> <i> <img> <input> <kbd> <label> <q> <s> <samp> <select> <small> <span> <strike> <strong>  <sub>  <sup>  <textarea>  <tt>  <u>  <var>

コンテンツ・モデルとは

コンテンツの種類

冒頭から説明したように、ブロックレベル要素・インラインレベル要素の分類は無くなりますがHTML5では以下のコンテンツの種類が定義されています。

コンテンツの種類定義
メタデータ・コンテンツ文書情報や他の文章との関係を定義する
フロー・コンテンツ文書の本体に現れる一般的なコンテンツ
セクショニング・コンテンツ見出しと概要を付けられるもの
ヘッディング・コンテンツセクションの見出しとなるもの
フレージング・コンテンツ段落などの中に含まれる文節・語句など
ヘンベッディッド・コンテンツ文書に他のリソースを埋め込むもの
インタラクティブ・コンテンツユーザーによる操作が可能なもの

各要素は、上記のコンテンツの種類のいずれか1つのみに分類される訳ではなく、1つの要素に対して複数のコンテンツの種類が定義されたり、条件付きで要素の種類が変化することもあります。 簡単に説明すると、目的に応じて細かく分類しているということですね。

また、コンテンツの種類に各要素が分類されることで、どの要素の中に、どの要素を配置できるかというタグのルールが決まります。なので、どの要素がどのコンテンツの種類に分類されているかを意識すると正確なHTML 文書を作成することができます。

詳しく!コンテンツの各要素

メタデータ・コンテンツ

<head>要素内で使用できる要素。表示や動作の指定をしたり、ドキュメントの関連性を指定したり、文章のメタ情報などを指定する。該当する要素が下記のものです。

<base> <link> <meta> <noscript> <script> <style> <template> <title>

フロー・コンテンツ

<body>要素内で使用できる要素。テキストや埋め込み要素を含みます。

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <bdi> <bdo> <blockquote> <br> <button> <canvas> <cite> <code> <command> <data> <datalist> <del> <details> <dfn> <dialog> <div> <dl> <embed> <em> <fieldset> <figure> <footer> <form> <h1>〜<h6> <header> <hgroup> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <main> <map> <mark> <menu> <meter> <nav> <noscript> <ol> <output> <p> <picture> <pre> <progress> <q> <ruby> <s> <samp> <script> <section> <select> <small> <span> <strong> <sub> <sup> <table> <template> <textarea> <time> <u> <ul> <var> <video> <wbr>

また、特定の条件が満たされている場合のみ、下記のカテゴリーに属する要素がいくつか存在します。

  • <area><map> 要素の子孫の場合
  • <link>: itemprop 属性がある場合
  • <meta>: itemprop 属性がある場合
  • <style>scoped 属性がある場合

セクショニング・コンテンツ

明示的にアウトラインを生成する要素 。<header>、<footer>、見出しコンテンツのスコープの定義するアウトライン内のセクションを作成します。

 <article>  <aside> <nav> <section>

ヘッディング・コンテンツ

見出しコンテンツ自身によって明示的に定義されたセクションの見出し 。<header>要素は見出しを含みますが、見出し要素ではないので注意です。

 <h1> <h2> <h3> <h4> <h5> <h6>

フレージング・コンテンツ

従来のHTMLでインライン要素と呼ばれていた分類 です。

<abbr> <audio> <b>  <bdo> <br> <button>  <canvas>  <cite>  <code> <data> <datalist>  <dfn>  <em>  <embed>  <i>  <iframe>  <img>  <input>   <kbd>  <keygen>  <label>  <mark>  <math>  <meter>  <noscript>  <object>  <output>  <progress>  <q>  <ruby>  <samp>  <script>  <select>  <small>  <span>  <strong>  <sub>  <sup>  <svg>  <textarea>  <time>  <var>  <video>  <wbr> +通常の文字列

他にも特定の条件が満たされたとき、下記のカテゴリーに属する要素があります。

  • <a>: 記述コンテンツだけを含む場合
  • <area><map> 要素の子孫である場合
  • <del>: 記述コンテンツだけを含む場合
  • <ins>: 記述コンテンツだけを含む場合
  • <link>: itemprop 属性がある場合
  • <map>: 記述コンテンツだけを含む場合
  • <meta>: itemprop 属性がある場合

ヘンベッディッド・コンテンツ

画像やインラインフレーム 、また他のマークアップ言語などを挿入したりするものです。

<audio>  <canvas>  <embed>  <iframe>  <img>  <math>  <object>  <svg>  <video>

インタラクティブ・コンテンツ

対話型コンテンツ。ユーザーとのやり取りのために固有された要素。 リンクやフォームの入力欄など 。

<a>  <button>  <details>  <embed>  <iframe>  <keygen>  <label>  <select>  <textarea>

また、要素によっては、特定の条件下にある場合のみこのカテゴリーに所属します。

  • <audio>controls 属性がある場合
  • <img>usemap 属性がある場合
  • <input>type 属性が hidden 状態ではない場合
  • <menu>type 属性が toolbar 状態ではない場合
  • <object>usemap 属性がある場合
  • <video>controls 属性がある場合

ここまでのまとめ–例があった方が分かりやすい!–

HTML4などでは、インラインブロック要素の中にブロックレベル要素を入れてはいけない。というルールがありました。

ではコンテンツモデルはどうなのか…

<secthion>
  <h1>見出し</h1>
  <span><p>テキストテキスト</p></span>
</section>

span要素の中にはフレージングコンテンツに属する要素のみをいれることができます。しかし、p要素はフロー・コンテンツに属するため、span要素の中にp要素をいれることはできません。この形式を正しく直すと下記のようになります。

<secthion>
  <h1>見出し</h1>
  <p><span>テキストテキスト</span></p>
</section>

p要素の中にはフロー・コンテンツに属する要素を入れることができるため、フレージング/フロー・コンテンツの両方に属するspan要素を入れることができました。要素をどこに入れてあげられるか、それがキーですね。

最後に・・

今回はHTML5のコンテンツ・モデルについてお話させていただきました。 HTMLを勉強し始めはSEOを気にしておらず、とりあえずdiv要素で囲んで..なんてこともしばしば。 文章が構造化されてそれぞれの役割を明確にすること は大切だと気づかされますね。

要素分類が細かくややこしく思うこともあると思いますが、 より正確なマークアップを目指していけるとよいですね。

長々とお付き合いいただきありがとうございました。

参考:MDN web docs

作者情報
IT初心者。甘いものが好きなのに甘い飲み物は別物で1日3食いけてしまう偏食家。