フローコンテンツとは

フローコンテンツは、body要素内で配置場所を限定されずに使用できる一般要素です。
HTML5の仕様書では、

body要素の子要素として直接配置できるのはフローコンテンツのみ

とされています。

フローコンテンツは全要素の大部分を占めるため、属さない要素を覚える方が簡単です。
以下の表の　　　　の部分がフローコンテンツ要素です。

まず、body要素の子要素として配置～とあるように、全体の構造を作るhead要素、body要素は該当しません。
head要素内で使用するメタデータ関連要素も該当しません。
さらに、特定の要素でしか使用できないli要素、tr/th/td要素なども同様です。

わからない要素がある場合は、HTMLクイックリファレンスなどで確認しましょう。

フローコンテンツの主要素

ここからはフローコンテンツの主な要素をピックアップしていきます。

header要素/main要素/footer要素

main要素はその部分がbody内のメインコンテンツであることを示す要素です。
そのため同一文書内に複数あってはいけません。
メインコンテンツには、他のページと共通するナビゲーション部分や検索フォームは含まれません。
また、main要素はarticle/aside/header/footer/nav要素の子要素として配置することはできません。

header要素とfooter要素は 、一般的な意味でのヘッダーとフッター部分に使用します。

具体的に言えば、header要素は見出しやロゴ画像、ナビゲーション、検索フォーム、セクションの目次、といった前置き的内容を含む範囲をマークアップするために使用します。

一方footer要素は、著作権に関する情報や関連文書へのリンク、記事やコメントを書いた人の名前や更新日時といった文書の付帯的内容を含む範囲をマークアップするために使用します。

どちらも必ず使用しなければいけないわけではありません。
また、必ずしもheader要素は先頭に、footer要素は末尾に配置する必要もありません。
内容が適していれば、文書中のどの位置に何度でも使用してOKです。
ただし、header要素内にfooter要素を入れる、あるいはfooter要素内にheader要素を入れることはNGです。

※header要素/main要素/footer要素はセクショニングコンテンツではありません。

p要素

p要素は、その内容が一つの段落であることを示す要素です。
おそらく最も使用頻度の高い要素です。

hr要素

hr要素は、段落レベルでのテーマの「区切り」を示す要素です。（HTML5から変更になった要素）
あくまで段落レベルなので、セクション間では使用しません。

address要素

address要素は、文書（最も近いarticle要素やbody要素）に関する連絡先を示すための要素です。
住所であることを示すためではないので注意です。
文書に関連のない連絡先は<p>タグで示す。

blockquote要素

blockquote要素は、その内容がブロックレベルでの引用文であることを示す要素です。
引用文をインライン（文章内）で示す時はq要素を使用する。

ul要素/ol要素/dl要素

ul要素とol要素は、箇条書き形式のリストとなる要素です。
ul要素は一般的な箇条書き、ol要素は番号付きで表示されます（CSSで変更可）。

使い分けとして、ul要素は順序を変更しても内容が伝わるものを示す時に、ol要素は順序を変更すると内容が伝わらないものを示す時に使用します。

dl要素は、ある短い言葉と、それに対応する文章のようなパターンのリストとなる要素です。
言い換えると、ある用語と説明文というリストを示す時に使用する要素です。
HTML5から、定義リスト（Definition List）から用語説明リスト（Description List）へ変更になりました。

 div要素

div要素は、他にふさわしい要素がない場合に使用する汎用ブロックレベル要素です。
単純にその範囲をブロックレベル要素にするだけで、特定の範囲にCSSを適用させたい場合などに使用します。
CSSを使いこなす上では、最も重要な要素と言えます。

参考

この記事は以下の書籍を参考にして書いています。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

Thanks for reading to the end!!