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>

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ