組み込みコンテンツ要素（1/4）
img要素（イメージ）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、usemapコンテンツ属性がある場合はインタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | 空 |
| 利用可能な場所 | エンベッディッド・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 禁止（ただし<img />は可能） |
| 要素固有のコンテンツ属性 | alt（イメージのフォールバック・コンテンツに役立つテキストを指定） src（イメージ・リソースのURLを指定） usemap（クライアント・サイド・イメージマップを目的に、そのイメージと結びつけるmap要素へのハッシュ名参照を指定） ismap（サーバ・サイド・イメージマップであることを表す） width（イメージの横幅を指定） height（イメージの縦幅を指定） |
| デフォルトスタイル | - |
img要素は、ドキュメントにイメージを組み込む（挿入）ために使います。
■利用例
<img src="picture.png" alt="写真を掲載しています。" />
レイアウト目的でimg要素を使うことはよくありません。spacer.gifなどという1×1ピクセルの透明画像を使って、レイアウトを整えるようなマークアップは、スタイルシートで対処するようにします。
img要素には、必須のコンテンツ属性がありますので、それらを一つひとつ紹介します。
★ srcコンテンツ属性
srcコンテンツ属性は、ドキュメントに組み込みたい画像ファイルなどのURLを指定し、img要素には必須です。一般的に、gifやjpeg、pngなどの画像ファイルを指定しますが、HTML5ではSVG、PDFファイルを指定することができます。
★ width、heightコンテンツ属性
widthコンテンツ属性はイメージの横幅のサイズ、heightコンテンツ属性はイメージの縦幅のサイズを指定します。いずれも、サイズを指定する場合は、CSSピクセルを単位として0以上の数値でなければいけません。
■利用例
<img src="picture.png" alt="写真を掲載しています。" width="200" height="100" />
★ altコンテンツ属性
HTML4では、altコンテンツ属性はイメージを簡単に説明する代替テキストとして規定されていましたが、HTML5ではアクセシビリティを考慮し、altコンテンツ属性に、さらに大きな役割となるフォールバックを与えています。
フォールバックとは、イメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことを求めたものです。
イメージのタイトルであれば、titleコンテンツ属性を使います。altコンテンツ属性はタイトルや補足を表すコンテンツではなく、イメージと同じ役割が求められます。しかし、どのように表現したら迷ってしまいます。HTML5仕様では、「電話越しに相手に言葉でイメージを説明すること」を想定したものを提言しています。
altコンテンツ属性は、かなり細かく規定されています。条件によれば省略もできますが、そうでなければ必須のコンテンツ属性とされています。
HTML5仕様でのaltコンテンツ属性の用途の規定は以下のようになります。
イメージだけを含むボタンやリンク
a要素、もしくはbutton要素の中にイメージしか入っていない場合、そのイメージを表すimg要素のaltコンテンツ属性には、そのボタンやリンクの目的を説明するテキストを記述します。
<button name="next"><img src="right_arrow.png" alt="次へ" /></button>
<a href="company.html"><img src="com.jpg" alt="会社概要へ" /></a>
もし、複数のイメージで一つのボタンを表したい場合は、最初のimg要素のaltコンテンツ属性にリンクの目的を入れ、残りのimg要素のaltコンテンツ属性は空文字列にします。
グラフィック表現を伴ったフレーズや段落
img要素の一般的な用途がこれです。グラフ、地図、挿絵などのイメージを本文の中で使い、それを見ることを前提にコンテンツが構成されたシーンを想定しています。
注意すべき点は、このシーンで使われるimg要素のaltコンテンツ属性は、そのイメージの説明ではなく、あくまでもイメージの代役として機能しなければなりません。
例えば、下の図のようにブラウザでレンダリングされたとします。
■適切でない例
<p>動物園にコアラを見に行った。</p>
<img src="Koala.png" alt="かわいいコアラ" />
<p>やはりコアラは人気者ですね。</p>
適切でない例のaltコンテンツ属性の内容は、写真の説明になります。altコンテンツ属性は、写真が表示されなかったことを想定した文面にする必要があります。
■適切な例
<p>動物園にコアラを見に行った。</p>
<img src="Koala.png" alt="かわいいコアラがこちらを向いている" />
<p>やはりコアラは人気者ですね。</p>
少しでも違った表現で、テキストの目的が異なってきます。titleコンテンツ属性とaltコンテンツ属性の使い分けをしっかりと見極めるようにしましょう。
ロゴやアイコン
ロゴやアイコンは、会社、組織、商品、図といった、さまざまな実態を図によって表したものです。このロゴやアイコンがどのように扱われるかによって、altコンテンツ属性の扱いが異なります。
<p><a href="/back"><img src="icon.png" alt="" />バック</a></p>
上のマークアップは、アイコンの横にその意味を表すテキストがある場合です。このイメージは補足的なものでしかないので、このアイコンの意味を説明する必要はありません。よって、altコンテンツ属性は空文字を入れますが、altコンテンツ属性を省略してはいけません。
次に、下のマークアップのようにアイコンの横にその意味を表すテキストがなかった場合です。
<ul>
<li><img src="calendar.png" alt="カレンダー" /></li>
<li><img src="watch.png" alt="時計" /></li>
<li><img src="phone.png" alt="電話" /></li>
</ul>
アイコンを見ただけで意味が誰でもわかるような時、それを説明するテキストは不要であると言えますので、このような場合はそのアイコンの意味をaltコンテンツ属性に入れます。
会社やサイトのロゴマークで、横にテキストが添えられていなければ、altコンテンツ属性に会社名やサイト名を入れます。今まで、そのようなアイコンに「ロゴ」という文字をaltコンテンツ属性に入れている例が多かったですが、必ず実体を表す名前を入れるようにします。ただし、ロゴそのものを話題にしたページ内のロゴ画像は、そのロゴをデザインした説明した文字列を入れるべきです。
ワードアート
文字をデコレーションした画像をワードアートと言います。
<h1><img src="title.png" alt="マークアップ本店" /></h1>
文字そのものをイメージとした場合は、altコンテンツ属性に、その文字を表すテキストを入れます。イメージの説明書きではなく、イメージに書いてある通りの文字を入れることになります。
なお、前後のテキストで説明がなされているイメージの場合は、altコンテンツ属性には空文字を入れます。
装飾用イメージ
純粋に装飾のためのイメージを組み込むためのimg要素は推奨されていません。もしも、使わざるを得ないような場合は、altコンテンツ属性には空文字を入れます。この場合でも、altコンテンツ属性は省略しないように注意をします。
iframe要素（インライン・フレーム）
| カテゴリ | フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、インタラクティブ・コンテンツ |
|---|---|
| コンテンツモデル | テキスト |
| 利用可能な場所 | エンベッディッド・コンテンツが期待される場所 |
| 開始タグ | 必須 |
| 終了タグ | 必須 |
| 要素固有のコンテンツ属性 | src（フレームのブラウジング・コンテキストに表示したいページのアドレス） srcdoc（フレームのブラウジング・コンテキストに表示したいコンテンツ） name（ブラウジング・コンテキストの名前） sandbox（フレーム内のコンテンツに制限を加える） seamless（あたかも親ページのコンテンツであるかのように、フレーム内のコンテンツをシームレスにレンダリング表示する） width（フレームの横幅を指定） height（フレームの縦幅を指定） |
| デフォルトスタイル | iframe{ border:2px inset; } |
iframe要素は、別ページのコンテンツを組み込みたいときに使用します。この要素は、開始タグと終了タグの中にはテキストしか入れてはいけません。仮にテキストを入れたとしても、srcコンテンツ属性で指定されたコンテンツの読み込みに失敗した場合、フォールバック・コンテンツとして扱われることはないですが、iframe要素をサポートしていないブラウザに対しては、フォールバック・コンテンツとして機能するかもしれません。なお、XMLドキュメントでは、開始タグと終了タグの中には何も入れてはいけません。
■利用例
<iframe src="other.html" width="450" height="100"></iframe>
利用例のように、フレームに組み込みたいページのアドレスを、srcコンテンツ属性を使って指定します。また、widthコンテンツ属性とheightコンテンツ属性を使って、フレームの横幅と縦幅を指定することができます。
iframe要素のコンテンツ属性として使用される属性を以下に紹介します。
★ srcdocコンテンツ属性
このコンテンツ属性はHTML5で新しく導入されたもので、フレームに組み込みたいコンテンツをHTMLマークアップそのもので指定します。簡単なHTMLコードであれば、別のページを用意をしなくても、直接、このコンテンツ属性にコンテンツを書き込んで、そのフレーム内に表示することができます。
<iframe srcdoc="<p>iframe要素内に直接簡単なHTMLコードを書き込むことができ
ます。ただし、<em>ダブルクォーテーション</em>で囲む必要があるので、
注意しましょう。</p>"></iframe>
srcdocコンテンツ属性の値は、必ずダブルクォーテーションで囲みます。また、このコンテンツ属性の中にリンクを埋め込むことができますが、その際ダブルクォーテーションでは囲むことができないので、"を使う必要があります。
<iframe srcdoc="<p>フレーム中に<a href=" http://www.sample.com/" > リンク</a>を埋め込むこともできます。</p>"></iframe>
★ nameコンテンツ属性
このコンテンツ属性は、フレーム内に表示されているブラウジング・コンテキストの名前を指定します。名前は、1文字以上を半角英数でつけます。ただし、名前の最初にアンダースコアを使ってはいけません。
<iframe src="other.html" name="other"></iframe>
nameコンテンツ属性に指定するブラウジング・コンテキスト名は、主にa要素などでリンク先を表示するターゲットに使います。
★ seamlessコンテンツ属性
このコンテンツ属性あ、HTML5で新たに導入された論理属性です。このコンテンツ属性がセットされたiframe要素から読み込まれたコンテンツは、親のブラウジング・コンテンツの中に初めからマークアップされていたかのように扱われます。フレームの境界線が引かれることはなく、シームレスにレンダリングされます。
これまでは、シームレスにレンダリングする技術としてSSI（Server Side Include）を使っていましたが、SSIはサーバ側で用意される仕組みなので、HTMLだけでは実現できませんでした。SSIと全く同じではありませんが、HTMLだけで実現させるコンテンツ属性としてsealessコンテンツ属性が導入されました。
<nav><iframe seamless="seamless" src="navigator.html"></iframe></nav>
上の例は、iframe要素の中にナビゲーションのみのHTMLファイルをリンクさせた方法です。
【各要素のリファレンス13】