インタラクティブコンテンツ(Interactive Content)は、ユーザーが操作可能なコンテンツカテゴリーです。また、これらの要素はフローコンテンツにも属しています。※MDNでは、「対話型コンテンツ」と表記されています。

以下の画像のインタラクティブの部分に該当します。

インタラクティブ・コンテンツに分類されるタグ一覧

• a … ハイパーリンクを作成するために使用されます。
• button … フォームやドキュメントでクリック可能なボタンを生成します。
• details … ユーザーがクリックすると追加情報が表示されるウィジェットです。
• embed … 外部コンテンツ（例えば、ビデオや画像）をHTML文書に埋め込むために使用されます。
• iframe … 別のHTMLページを現在のページに埋め込むために使用されます。
• label … フォーム要素にラベルを付けるために使用されます。
• select … ドロップダウンリストやオプションメニューを作成するために使用されます。
• textarea … 複数行のテキスト入力フィールドを生成するために使用されます。

特定の場合を満たせば以下もインタラクティブコンテンツ含まれます

• audio … インタラクティブコンテンツとして該当するのは、controls 属性がある場合です。
• img … 画像をHTML文書に表示するために使用されます。インタラクティブコンテンツとして該当するのは、usemap 属性がある場合です。
• input … ユーザーからのデータ入力を受け取るためのさまざまなタイプのフォーム要素を生成します。インタラクティブコンテンツとして該当するのは、type 属性が hidden 状態ではない場合です。
• menu … インタラクティブコンテンツとして該当するのは、type 属性が toolbar 状態ではない場合です。
• object … インタラクティブコンテンツとして該当するのは、usemap 属性がある場合です。
• video … ビデオコンテンツをHTML文書に埋め込むために使用されます。インタラクティブコンテンツとして該当するのは、controls 属性がある場合です。

インタラクティブコンテンツの役割

インタラクティブ・コンテンツは、ユーザーとの対話を可能にし、Webページをより魅力的で使いやすくします。

データ収集

フォームや入力要素を通じてユーザーデータを収集し、それを活用できるようにします。

アクションのトリガー

ボタンやリンクをクリックすることで、特定のアクションを実行できるようにします。

まとめ

インタラクティブコンテンツは、Webページをユーザーとのコミュニケーションの場(メールフォームなど)に変え、ユーザーが感じる使いやすさ、印象を向上させる重要な要素です。これらはユーザーとのエンゲージメントを高め、データ収集、アクションのトリガーなど、多くの役割を果たします。Web開発者はこれらを適切に使うことでユーザーに価値ある体験を提供することができます。

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

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

メタデータコンテンツ

フローコンテンツ

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

ヘディングコンテンツ

フレージングコンテンツ

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

参考サイト