もじゃもじゃラボ/JavaScriptでプログラミングの基本的概念を学ぼう！/タグの種類/埋め込み
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

埋め込み

埋め込み

画像や動画といったマルチメディアコンテンツの埋め込みに使用します。

img

用途画像の埋め込み
書式サンプルソース参照
画像を表示します。src属性で表示する画像のファイル名を指定します。alt属性には、画像の代替テキストを指定します。この属性は、画像が表示されない場合やアクセシビリティのために使用されます。
アクセシビリティとは、サイトを閲覧する人がどのような状況に置かれていても、平等にサービスを提供するための機能であり、「利用しやすさ」や「使いやすさ」という意味を持ちます。例えば、視覚に障害のあった場合でも、読み上げ機能などを使ってalt属性の値が読み上げられることで、画像の意味を伝えることができます。
また、通信回線が悪く画像が表示されなかった場合でも、代替テキストが表示されるため、どんな画像を表示しようとしていたかがなんとなく伝わります。
ただし、見た目のためだけの画像など、代替テキストが不要な場合もあり、alt属性は必須項目ではありません。

サンプルコード

video

用途動画の埋め込み
書式
Webページに動画を埋め込みます。imgタグと同様、src属性を使います。動画のファイル名を指定します。
controlsという属性を指定すると、再生や停止、音量の調整などを制御するコントロールが表示されます。動画の形式によっては再生されない時のことを考えて、複数の形式の動画をあらかじめ用意しておくという方法もあります。この中から再生可能なものが選ばれます。

audio

用途音声の埋め込み
書式
Webページに音声コンテンツを埋め込みます。音声ファイルのファイル名はsrc属性で指定します。また、controlsという属性を指定すると、videoタグと同様に制御コントロールが表示されます。