032.3 レッスン 1

埋め込みコンテンツで最も一般的なのは、テキストに付随する画像です。画像は別々に保管され、HTMLファイルの中では <img> タグで参照されます。

<img> タグは閉じタグを必要としません。src プロパティは、画像ファイルのソースロケーションを示します。この例では、画像ファイル logo.png がHTMLファイルと同じディレクトリになければならず、そうでなければブラウザは画像を表示できません。ソースロケーションプロパティは相対パスを受け付けるので、次のように ドット を使って画像の相対パスを示すことができます。

2つのドットは、画像がHTMLファイルのあるディレクトリから相対的に親ディレクトリの中にあることを示します。URLが http://example.com/library/periodicals/index.html であるHTMLファイルの中にファイル名 ../logo.png が使われている場合、ブラウザは画像ファイルを http://example.com/library/logo.png のアドレスにリクエストします。

ドットを使った相対パス記述は、HTMLファイルがファイルシステム上の実際のファイルではない場合にも適用されます。HTMLブラウザはURLをファイルへのパスであるかのように解釈しますが、そのパスがファイルを指しているのか、それとも動的に生成されたコンテンツを指しているのかを判断するのはHTTPサーバの仕事です。HTMLファイルがHTTPリクエストから来た場合には、サーバへのすべてのリクエストにドメインと適切なパスが自動的に追加されます。同様に、HTMLファイルがローカルファイルシステムから直接開かれた場合、ブラウザは適切な画像を開きます。

先頭が / で始まるファイル名のパスは、絶対パスとして扱われます。絶対パスは、画像の位置に関する完全な情報を持っているため、HTMLドキュメントの位置に関係なく動作します。 CDN（Contents Delivery Network） を利用する場合など、画像ファイルが他のサーバにある場合は、ドメイン名も含める必要があります。

画像が読み込めない場合、HTMLブラウザは画像の代わりに alt 属性で指定されたテキストを表示します。例えば、以下のようになります。

また、 alt 属性はアクセシビリティの観点からも重要です。テキストオンリーのブラウザやスクリーンリーダーは、この属性を対応する画像の説明文として使用します。

オーディオやビデオのコンテンツは、画像とほぼ同じ方法でHTMLドキュメントに追加することができます。当然のことながら、オーディオを追加するためのタグは <audio> であり、ビデオを追加するためのタグは <video> です。当然のことながら、テキストのみのブラウザではマルチメディアコンテンツを再生することはできませんので、 <audio> と <video> タグは、表示できなかった要素のフォールバックとして使用されるテキストを保持するために閉じタグを使用します。例えば、以下のようになります。

ブラウザが <audio> タグをサポートしていない場合は、代わりに “Unable to play recording.mp3” という行が表示されます。 </audio> や </video> タグで閉じることで、Webページには、<img> タグの alt 属性で許可されている単純なテキストの行よりも、より手の込んだ代替コンテンツを含めることができます。

<audio> と <video> タグの src 属性は、 <img> タグと同じように動作しますが、ライブストリームを示すURLも受け付けます。ブラウザは、受信したコンテンツのバッファリング、デコード、および表示を行います。 controls 属性は、再生コントロールを表示します。この属性がないと、訪問者は再生を一時停止したり、巻き戻したり、その他の操作をすることができません。

HTML文書の中に画像を挿入するのと同様に、HTML文書を別のHTML文書の中に入れ子にすることができますが、その際には <iframe> というタグを使用します。

簡素なテキストオンリーのブラウザは <iframe> タグをサポートしておらず、代わりに囲まれたテキストを表示します。マルチメディアタグと同様に、 src 属性はネストされたドキュメントのソースロケーションを設定します。また、 width と height 属性を追加することで、 iframe 要素のデフォルトの寸法を変更することができます。

name 属性は、iframeを参照して、入れ子のドキュメントを変更することができます。この属性がないと、入れ子になったドキュメントを変更することはできません。 anchor 要素を使うと、現在のブラウザウィンドウではなく、iframe内の別の場所からドキュメントを読み込むことができます。

HTMLドキュメントのアドレスには、ドキュメント内のリソースを識別するために使用できる フラグメント をオプションで含めることができます。このフラグメントは、 URLアンカー とも呼ばれ、URLの最後にハッシュ記号 # をつけた文字列です。例えば、 History という単語は、 https://en.wikipedia.org/wiki/Internet#History というURLの中のアンカーです。

URLにアンカーがある場合、ブラウザはドキュメント内の対応する要素、つまり、 id 属性がURLのアンカーと同じである要素にスクロールします。与えられたURL、 https://en.wikipedia.org/wiki/Internet#History の場合、ブラウザは “History” のセクションに直接ジャンプします。このページのHTMLコードを調べてみると、セクションのタイトルが対応する id 属性を持っていることがわかります。

URLアンカーは、 <a> タグの href 属性で、外部のページを指している場合と、現在のページ内の場所を指している場合のどちらでも使用できます。後者の場合は、 <a href="#History">History</a> のように、URLフラグメントと一緒にハッシュ記号だけで開始すれば十分です。

URLアンカーに対するブラウザの反応をカスタマイズする方法があります。たとえば、 hashchange ウィンドウイベントをリッスンし、アニメーションやHTTPリクエストなどのカスタマイズされたアクションをトリガーするJavaScript関数を記述することができます。ただし、URLフラグメントはURLとともにサーバに送信されることはないので、HTTPサーバが識別子として使用することはできないことに注意してください。