srcdoc 属性埋め込む HTML を記述

srcdoc 属性は iframe 要素で埋め込む HTML 文書の内容を指定します。つまり、表示したい HTML を属性値として直接入力します。

srcdoc 属性で埋め込む HTML は、下記の構文である必要があります。

  1. 任意の数のコメントとスペース文字
  2. オプションで DOCTYPE 宣言
  3. 任意の数のコメントとスペース文字
  4. html 要素
  5. 任意の数のコメントとスペース文字

この通りに記述すると srcdoc 属性の値は下記のようになります。

<!DOCTYPE html><html><head><title>タイトル</title></head><body>内容</body></html>

ただし、HTML 文書においては、html 要素head 要素body 要素の開始終了タグは省略可能ですし、srcdoc 属性値に入る HTML 文書内では title 要素も省略可能ですので、実際には body 要素の内容のみ記述すればよいことになります。

なお、srcdoc 属性値に入る 「"」 及び 「&」 は文字参照 (それぞれ 「&quot;」「&amp;」) とする必要があります。

XTHML5 文書では、srcdoc 属性値に入る XHTML も XML として妥当な構文とする必要があります。また、「<」「>」 も、文字参照として 「&lt;」「&gt;」 としなければなりません。

サンプルソースを見る

srcdoc 属性の仕様

この属性を使用できる要素

srcdoc 属性のサンプルソース

<!-- srcdoc 属性を使用した例 。値の中の「"」と「&」は文字参照にする必要があります -->
<iframe srcdoc="<p><dfn><abbr title=&quot;HyperText Markup Language&quot;>HTML</abbr></dfn>とは…</p>"></iframe>
 
<!-- XML として扱う場合は、属性値の「<」「>」も文字参照にします -->
<iframe srcdoc="&lt;p&gt;&lt;dfn&gt;&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt;&lt;/dfn&gt;とは…&lt;/p&gt;"></iframe>