HTML5より前は、要素をブロック要素、インライン要素、その他などと分類して、インライン要素の中にブロック要素は置かない等のルールがありましたが、HTML5ではブロック要素やインライン要素という考え方が無くなり、各要素はおおよそ７つのカテゴリに分類されるようになりました。
今回は、そのカテゴリについてまとめたいと思います。
メタデータ・コンテンツ 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
見出し（ヘディング）と、それをまとめるコンテンツです。
セクショニング・コンテンツ 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属性がある場合）
|
