HTML5で考え直すブロックレベル要素とインライン要素

フローコンテンツ

フローコンテンツは、様々な表示用コンテンツが含まれるカテゴリです。主に以下の要素が含まれることになります。

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

これ以外にもテキスト自体が含まれます。
また、一定の条件を満たした場合にフローコンテンツとされる物もあります。
– <map> の中の <area>
– itemprop 属性が指定された <link> または <meta>
– scoped 属性が指定された <style>

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

その名の通り、文書のセクションを区切っていくために使われるタグのカテゴリです。主に以下の要素が含まれます。

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

これらの要素により、次に登場するヘディングコンテンツがどのセクションに対して示される物なのかがわかる様になります。

ヘッディングコンテンツ

こちらもその名の通り見出しを示す部分です。セクショニングコンテンツの中にあれば、そのセクションに対して、そうで無ければ、このヘッディングコンテンツ自身が事実上のセクションを示すことになります。このカテゴリのタグは以下の物です。

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

なお、 <header> は役割が違いますので、ヘッディングコンテンツには含まれません。

フレージングコンテンツ

フレーズというなのイメージ通り、いろいろなテキストや段落を構成するような要素のことです。例えば以下のような物です。

<abbr> <audio> <b> <bdo> <br> <button> <canvas> <cite> <code> <command> <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>
– <map> の中の <area>
– フレージングコンテンツだけを含む <del> または <ins> または <map>
– itemprop 属性が存在する <link> または <meta>

埋め込みコンテンツ

コレはわかりやすいですね。メディア・ファイルや外部コンテンツを埋め込む際に利用されるものです。タグとしては以下のものがあります。

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

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

このタイプのタグは、ユーザーのアクションに対して何かしらの機能を持つタイプの物を指します。タグの種類をみるとわかりやすいかも知れません。

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

一部のタグは、状態に依って、ここに含まれることになります。
– controls 属性が存在する <audio> または <video>
– usemap 属性が存在する <img> または <object>
– type 属性が hidden ではない <input>
– type 属性が toolbar ではない <menu>

フォーム関連コンテンツ

ここには特定のフォームに含まれる要素が含まれます。主に <form> の中に用意される要素です。物によっては form 属性で id を指定されて、特定のフォームに属するように指定された物も含まれることになります。

<button> <fieldset> <input> <keygen> <label> <meter> <object> <output> <progress> <select> <textarea>

これらは更にサブカテゴリに分類することが出来ます。