HTML を使用してドキュメント内に画像を表示できます。

画像を挿入
この例では、Web ページに画像を表示する方法を示します。
別の場所から画像を挿入する
この例では、他のフォルダーまたはサーバーから Web ページに画像を表示する方法を示します。

(その他の例はこのページの下部にあります)

イメージタグ (<img>) とソース属性 (Src)

HTML では、画像は <img> タグで定義されます。

<img> は空のタグです。つまり、属性のみが含まれ、終了タグがありません。

ページに画像を表示するには、source 属性 (src) を使用する必要があります。 src は「ソース」を指します。 source プロパティの値は、画像の URL アドレスです。

画像を定義するための構文は次のとおりです。

<img src="url" />

URL は、画像が保存されている場所を指します。 「boat.gif」という名前の画像が www.w3school.com.cn の画像ディレクトリにある場合、その URL は http://www.w3school.com.cn/images/boat.gif です。

ブラウザには、ドキュメント内でイメージ タグが出現する場所のイメージが表示されます。 2 つの段落の間にイメージ タグを配置すると、ブラウザでは最初に最初の段落が表示され、次にイメージが表示され、最後に 2 番目の段落が表示されます。

テキスト属性を置換 (Alt)

alt 属性は、画像の代替テキストの文字列を定義するために使用されます。 「テキストを置換」プロパティの値はユーザー定義です。

<img src="boat.gif" alt="Big Boat">

ブラウザが画像のロードに失敗した場合、alt テキスト属性は読者にどのような情報が欠けているかを伝えます。 この時点で、ブラウザには画像の代わりにこの代替テキストが表示されます。 ページ上の画像に代替テキスト属性を追加することをお勧めします。これは、情報をより適切に表示するのに役立ち、テキスト専用ブラウザを使用している場合に非常に役立ちます。

基本的なメモ - 役立つヒント:

HTML ファイルに 10 個の画像が含まれている場合、ページを正しく表示するには、11 個のファイルをロードする必要があります。 画像の読み込みには時間がかかるため、画像の使用には注意することをお勧めします。

その他の例

背景画像
この例は、HTML ページに背景画像を追加する方法を示します。
画像の位置を調整する
この例は、テキスト内に画像を配置する方法を示します。
フローティング画像
この例では、画像を段落の左側または右側にフロートさせる方法を示します。
画像のサイズを変更する
この例では、画像をさまざまなサイズに変更する方法を示します。
画像の代替テキストを表示する
この例は、画像の代替テキストを表示する方法を示します。 ブラウザが画像のロードに失敗すると、代替テキスト属性が不足している情報をリーダーに伝えます。 ページ上のすべての画像に alt テキスト属性を追加することをお勧めします。
画像リンクを作成する
この例では、画像をリンクとして使用する方法を示します。
イメージ マップを作成する
この例では、クリック可能な領域を含むイメージ マップを作成する方法を示します。 これらの各フィールドはハイパーリンクです。
画像を画像マップに変換する
この例では、通常の画像をイメージ マップとして設定する方法を示します。

イメージタグ

タグ 説明
<img> はイメージを定義します。
<map> はイメージ マップを定義します。
<area> は、イメージ マップ内のクリック可能な領域を定義します。