要素のカテゴリとは
HTML5には、約100種類程度の要素が存在します。そして、その要素達を分類するためにカテゴリーという概念があります。このカテゴリーは、主にコンテンツ・モデル(要素の配置ルール)に利用します。なお、多くの要素は1つのカテゴリーにのみ属しているわけじゃなく、複数のカテゴリーに属していたりします。また、どのカテゴリーにも属さない要素なんかもあります。
7つの主要カテゴリー
コンテンツ・モデルで、主に使われるカテゴリーが以下の7つのカテゴリーです。
メタデータ・コンテンツ(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>、
<data>、
<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>、
<template>、
<textarea>、
<time>、
<u>、
<ul>、
<var>、
<video>、
<wbr>、
テキスト
セクショニング・コンテンツ(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>、
<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>、
テキスト
エンベッディッド・コンテンツ(Embedded content)
エンベッディッド・コンテンツは、外部のリソースや、HTML以外の言語で生成されたコンテンツを埋め込む要素が分類されます。
エンベッディッド・コンテンツの要素
<audio>、
<canvas>、
<embed>、
<iframe>、
<img>、
<math>、
<object>、
<svg>、
<video>、
インタラクティブ・コンテンツ(Interactive content)
インタラクティブ・コンテンツは、ユーザーが何かしらの操作(クリックなど)をすることができる要素が分類されます。
インタラクティブ・コンテンツの要素
<a>、
<audio>(controls属性が存在している場合) 、
<button>、
<datalist>、
<embed>、、
<iframe>、
<img>(usemap属性が存在している場合)、
<input>(type属性がhiddenではない場合) 、
<keygen>、
<label>、
<menu>(type属性がtoolbar状態の場合)、
<object>、
<select>、
<textarea>、
<video>(controls属性が存在している場合) 、
その他のカテゴリー
上記以外にも、少し特殊なカテゴリが存在します。
パルパブル・コンテンツ(Palpable content)
コンテンツ・モデルがフロー・コンテンツまたは、フレージング・コンテンツの要素で、かつ、要素内にhidden 属性が指定されていない要素が1つ以上ある要素は、このパルパブル・コンテンツになります。
パルパブル・コンテンツの要素
<a>、
<abbr>、
<address>、
<article>、
<aside>、
<audio>(controls属性が存在している場合) 、
<b>、
<bdi>、
<bdo>、
<blockquote>、
<button>、
<canvas>、
<cite>、
<code>、
<data>、
<dfn>、
<div>、
<dl>(子要素に1つ以上のname-valueグループを含む場合)、
<em>、
<embed>、
<fieldset>、
<figure>、
<footer>、
<form>、
<h1>、
<h2>、
<h3>、
<h4>、
<h5>、
<h6>、
<header>、
<i>、
<iframe>、
<img>、
<input>(type属性がhiddenではない場合) 、
<ins>、
<kbd>、
<keygen>、
<label>、
<main>、
<map>、
<mark>、
<math>、
<meter>、
<nav>、
<object>、
<ol> (子要素に1つ以上のli要素を含む場合)、
<output>、
<p>、
<pre>、
<progress>、
<q>、
<ruby>、
<s>、
<samp>、
<section>、
<select>、
<small>、
<span>、
<strong>、
<sub>、
<sup>、
<svg>、
<table>、
<textarea>、
<time>、
<u>、
<ul> (子要素に1つ以上のli要素を含む場合)、
<var>、
<video>、
要素感が空白ではないテキスト
スクリプトサポート要素(Script-supporting elements)
スクリプトサポート要素は、それ自身では何も表示されない要素で、ユーザーに機能を提供するなどのスクリプトをサポートする要素が分類されます。
スクリプトサポート要素の要素
セクショニング・ルート(Sectioning root)
セクショニング・ルートは、独立したアウトラインを持つことができる要素が分類されます。これらの要素は、祖先要素のアウトラインの影響を受けません。
セクショニング・ルートの要素
<blockquote>、
<body>、
<details>、
<fieldset>、
<figure>、
<td>
関連するリファレンス
これらのカテゴリーはHTML5からのカテゴリーになります。HTML5より前は、ブロックレベル要素とインライン要素の2つのカテゴリに分類していました。