【HTML5】コンテンツ・モデルとは種類とわかりやすい例について

はじめに…

今回は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では以下のコンテンツの種類が定義されています。

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

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

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

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

メタデータ・コンテンツ

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

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

フロー・コンテンツ

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

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

<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> +通常の文字列