フローコンテンツ(Flow Content)とは、Webページの中で広く使われるもので、文章の段落、画像、リンク、リストなど、ページのほとんどの部分を形成するHTMLカテゴリーです。

以下の画像のフローの部分に該当します。

フローコンテンツに分類されるタグ一覧

• a … ハイパーリンクを作成するために使用されます。
• abbr … 略語や頭字語を表すために使用されます。
• address … 連絡先情報を表すために使用されます。
• article … 独立したコンテンツを表すために使用されます。
• aside … メインコンテンツとは別に、補足情報や関連リンクを含むセクションを定義するために使用されます。
• audio … オーディオコンテンツをHTML文書に埋め込むために使用されます。
• b … テキストの太字表現に使用されます。
• bdo … テキストの書字方向を制御するために使用されます。
• bdi … テキストの部分的な書字方向の隔離に使用されます。
• blockquote … 引用文を表すために使用されます。
• br … 改行を挿入するために使用されます。
• button … クリック可能なボタンを生成するために使用されます。
• canvas … グラフィックスやアニメーションを描画するための領域を提供します。
• cite … タイトルや作品名を表すために使用されます。
• code … コンピューターコードの一部を表すために使用されます。
• command … 非推奨
• data … コンテンツに機械可読な翻訳を提供するために使用されます。
• datalist … 入力フィールドに対する予測候補のリストを提供するために使用されます。
• del … 削除されたテキストを表すために使用されます。
• details … ユーザーがクリックすると追加情報が表示されるウィジェットです。
• dfn … 用語の定義を表すために使用されます。
• div … 汎用的なコンテナとして使用されます。
• dl … 定義リストを作成するために使用されます。
• em … テキストの強調表現に使用されます。
• embed … 外部コンテンツをHTML文書に埋め込むために使用されます。
• fieldset … フォーム要素をグループ化するために使用されます。
• figure … 図や画像などの独立したコンテンツを表すために使用されます。
• footer … ドキュメントやセクションのフッターを表すために使用されます。
• form … ユーザー入力を受け取るフォームを定義するために使用されます。
• h1, h2, h3, h4, h5, h6 … タイトルや見出しを表すために使用されます。
• header … ドキュメントやセクションのヘッダーを表すために使用されます。
• hgroup … 見出しのグループを定義するために使用されます。
• hr … 水平線を挿入するために使用されます。
• i … テキストの斜体表現に使用されます。
• iframe … 別のHTMLページを現在のページに埋め込むために使用されます。
• img … 画像をHTML文書に表示するために使用されます。
• input … ユーザーからのデータ入力を受け取るためのさまざまなタイプのフォーム要素を生成します。
• ins … 挿入されたテキストを表すために使用されます。
• kbd … キーボード入力を表すために使用されます。
• label … フォーム要素にラベルを付けるために使用されます。
• main … ドキュメントのメインコンテンツを表すために使用されます。
• map … 画像マップを定義するために使用されます。
• mark … 強調したいテキストをハイライトするために使用されます。
• math … 数学的式や記号を表示するために使用されます。
• menu … ユーザーインターフェイスのメニューオプションを定義するために使用されます。
• meter … スカラーメジャーまたは割合の値を表すために使用されます。
• nav … ナビゲーションリンクの集合を表すために使用されます。
• noscript … スクリプトが無効な場合に表示されるコンテンツを定義するために使用されます。
• object … 外部リソースをHTML文書に埋め込むために使用されます。
• ol … 順序付きリストを作成するために使用されます。
• output … フォームの出力を表すために使用されます。
• p … 段落を定義するために使用されます。
• picture … レスポンシブな画像コンテナとして使用されます。
• pre … 整形済みテキストを表示するために使用されます。
• progress … 進行状況のバーを表すために使用されます。
• q … インラインでの引用を表すために使用されます。
• ruby … ルビ文字（注釈付きテキスト）を定義するために使用されます。
• s … 取り消し線付きのテキストを表すために使用されます。
• samp … サンプル出力を表すために使用されます。
• script … スクリプトを定義するために使用されます。
• section … ドキュメント内の特定のセクションを定義するために使用されます。
• select … ドロップダウンリストやオプションメニューを作成するために使用されます。
• small … 小さな文字サイズでテキストを表示するために使用されます。
• span … インライン要素をグループ化するために使用されます。
• strong … テキストの強い強調を表すために使用されます。
• sub … 下付き文字を表示するために使用されます。
• sup … 上付き文字を表示するために使用されます。
• svg … スケーラブルベクターグラフィックスを表示するために使用されます。
• table … テーブルを表示するために使用されます。
• template … 内容がクローンされて再利用されることを意図したHTMLのテンプレートを定義するために使用されます。
• textarea … 複数行のテキスト入力フィールドを生成するために使用されます。
• time … 日付や時刻を表すために使用されます。
• u … 下線付きのテキストを表すために使用されます。
• ul … 順序なしリストを作成するために使用されます。
• var … 数式などで使用される変数を表すために使用されます。
• video … ビデオコンテンツをHTML文書に埋め込むために使用されます。
• wbr … 単語内での改行可能な場所を示すために使用されます。

特定の場合を満たせば以下もフローコンテンツに含まれます。

• area … <map> 要素内で使用され、画像マップ内のクリック可能な領域を定義するために使用されます。フローコンテンツに該当するのは、<map> 要素の子孫の場合です。
• link … 外部リソースへのリンクや関係を定義するために使用されます。フローコンテンツに該当するのは、itemprop 属性がある場合です。
• meta … メタデータを提供するために使用されます。フローコンテンツに該当するのは、itemprop 属性がある場合です。
• style … HTML文書にスタイル情報（CSS）を埋め込むために使用されます。フローコンテンツに該当するのは、scoped（現在は非推奨）属性がある場合です。

まとめ

フローコンテンツは、Webページを作る上で最も基本的で重要な要素です。これらはページの中核を成す部品であり、テキスト、画像、リンクなど、多くの異なる種類の内容を表現するのに使われます。フローコンテンツを上手に使うことで、より魅力的で理解しやすいWebページを作ることができます。

コンテンツモデルとは？HTML入れ子ルールを実例も含め解説

コンテンツカテゴリーの仲間

メタデータコンテンツ

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

ヘディングコンテンツ

フレージングコンテンツ

エンベディッドコンテンツ

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

参考サイト