ITコラム

ITコラム

2017.01.11

HTML5【カテゴリ】～7つのカテゴリ

HTML5より前は、要素をブロック要素、インライン要素、その他などと分類して、インライン要素の中にブロック要素は置かない等のルールがありましたが、HTML5ではブロック要素やインライン要素という考え方が無くなり、各要素はおおよそ７つのカテゴリに分類されるようになりました。
今回は、そのカテゴリについてまとめたいと思います。

目次
１．７つのカテゴリ
２．各カテゴリの関係

１．７つのカテゴリ

HTML要素のカテゴリは7つあります。

メタデータ・コンテンツ　Metadata content

HTMLの情報や、外部ファイル読み込み、CSSやスクリプトの指定など、文書情報や別文書との関係などを定義するコンテンツです。

このカテゴリに属する要素
<base>
<link>
<meta>
<noscript>
<script>
<style>
<template>
<title>

　

フロー・コンテンツ　Flow content

文書の本体に現れる一般的なコンテンツで、ほとんどの要素がこのコンテンツに含まれます。フローコンテンツ＋カテゴリに属さない要素（sectioning rootsの一部を含む）＋メタデータ・コンテンツの一部ですべての要素になります。

このカテゴリに属する要素
<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>-<h6>　　<header>
<hr>　　<i>　　<iframe>　　<img>
<input>　　<ins>　　<kbd>　　<keygen>
<label>　　<main>　　<map>　　<mark>
<menu>　　<meter>　　<nav>　　<noscript>
<object>　　<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>　　テキスト

　

ヘディング・コンテンツ　Heading content

見出し（ヘディング）と、それをまとめるコンテンツです。

このカテゴリに属する要素
<h1> ～ <h6>

　

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

見出しとその内容（セクション）をまとめるコンテンツです。

このカテゴリに属する要素
<article>
<aside>
<nav>
<section>

　

フレージング・コンテンツ　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>　　<meter>　　<noscript>　　<object>
<output>　　<picture>　<progress>　　<q>
<ruby>　　<s>　　<samp>　　<script>
<select>　　<small>　　<span>　　<strong>
<sub>　　<sup>　　<template>　　<textarea>
<time>　　<u>　　<var>　　<video>
<wbr>　　テキスト

　

エンベッディド・コンテンツ　Embedded content

文書内に埋め込みを行うコンテンツです。画像、音、ビデオ、他のHTMLなどを読み込みます。

このカテゴリに属する要素
<audio>
<canvas>
<embed>
<iframe>
<img>
<object>
<picture>
<video>

　

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

ユーザーが操作可能なコンテンツです。クリックやキーボード操作で変化するコンテンツのためのものです。

このカテゴリに属する要素
<a> （HTML 5.1ではhref属性がある場合に限る）
<audio> （controls属性がある場合）
<button>
<details>
<embed>
<iframe>
<img> （usemap属性がある場合）
<input> （type=”hidden”の場合は除く）
<keygen>
<label>
<object> （usemap属性がある場合）
<select>
<textarea>
<video> （controls属性がある場合）