HTML Living Standard/エンベッディッド・コンテンツ

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

エンベッディッド・コンテンツ（Embedded Content）は、HTML文書内に他のリソースやメディアコンテンツを埋め込むためのコンテンツカテゴリです。これには画像、動画、音声、埋め込みフレーム、スクリプトなどが含まれます。

定義

エンベッディッド・コンテンツは以下のような役割を果たします：

• 外部リソース（例：画像ファイル、音声ファイル、動画ファイル）をHTML文書に組み込みます。
• 動的なデータやインタラクティブなコンテンツを提供するために使用されます。

このカテゴリに含まれる要素は、主にブロックレベルまたはインラインレベルのどちらでも使えるものが多いです。

エンベッディッド・コンテンツに含まれる要素

エンベッディッド・コンテンツには、以下の主要な要素があります：

• 画像（Image）
  • <img>：画像を埋め込むための要素。

    例：

    <img src="example.jpg" alt="説明文">
    

• 動画および音声（Media）
  • <audio>：音声を埋め込む要素。
  • <video>：動画を埋め込む要素。
  • <track>：字幕やトラックデータを提供する要素（<audio>や<video>内で使用）。

    例：

    <video controls>
      <source src="example.mp4" type="video/mp4">
      サポートされていない場合の代替テキスト。
    </video>
    

• 埋め込みフレーム（Interactive Content）
  • <iframe>：他のHTML文書を埋め込むための要素。

    例：

    <iframe src="https://example.com" width="600" height="400"></iframe>
    

• スクリプトおよびプログラム
  • <script>：スクリプトを埋め込むための要素。
  • <canvas>：スクリプトで描画可能な領域を提供する要素。
  • <noscript>：スクリプト非対応時に代替コンテンツを提供する要素。

    例：

    <script>
      console.log("スクリプトが実行されました");
    </script>
    

• オブジェクトおよび埋め込み
  • <object>：汎用埋め込み要素。外部リソースやプラグインで提供されるコンテンツを埋め込む。
  • <embed>：汎用埋め込み要素。ブラウザでネイティブにサポートされる埋め込みを提供。
  • 例：

<object data="example.pdf" type="application/pdf" width="600" height="400">
  PDFが表示されない場合の代替テキスト。
</object>

• ピクチャ関連
  • <picture>：複数の画像リソースを提供するための要素。
  • <source>：画像やメディアのソースを指定。

    例：

    <picture>
      <source srcset="example.webp" type="image/webp">
      <img src="example.jpg" alt="代替画像">
    </picture>
    

特性

エンベッディッド・コンテンツの特徴は以下の通りです：

• 外部リソースの参照

  ほとんどのエンベッディッド要素は、外部ファイル（画像、動画、音声など）を指定するためのsrc属性やdata属性を持ちます。

• フォールバックコンテンツのサポート

  <object>や<video>など一部の要素は、ブラウザが特定のリソースを表示できない場合に備えてフォールバックコンテンツを指定できます。

• アクセシビリティ

  適切なalt属性や代替コンテンツを指定することで、すべてのユーザーがコンテンツにアクセスできるようにすることが重要です。

使用例

以下は、エンベッディッド・コンテンツを使用したHTMLコードの例です：

<!-- 画像 -->
<img src="example.jpg" alt="サンプル画像">

<!-- 動画 -->
<video controls>
  <source src="example.mp4" type="video/mp4">
  このブラウザは動画をサポートしていません。
</video>

<!-- 音声 -->
<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  このブラウザは音声をサポートしていません。
</audio>

<!-- 埋め込みフレーム -->
<iframe src="https://example.com" width="600" height="400">
  このブラウザはiframeをサポートしていません。
</iframe>

使用上の注意

• エンベッディッド・コンテンツを使用する際は、アクセシビリティを考慮して適切な代替コンテンツを指定してください。
• 外部リソースのサイズや形式に注意し、ユーザーのネットワーク環境に配慮した設計を心がけましょう。
• <embed>や<object>は用途が重複する場合があるため、使用目的を明確にしてください。

関連項目

• HTML Living Standard/フロー・コンテンツ
• HTML Living Standard/フレージング・コンテンツ
• HTML Living Standard/アクセシビリティ

関連仕様

• HTML Living Standard – Embedded content