HTML <img> タグ

画像の挿入方法：

他の "Try it Yourself" の例が下にあります。

定義と用法

<img> タグは、HTM Lページに画像を定義します。

<img> タグには、必須である src と alt の 2 つの属性があります。

注: 画像は、厳密には、HTML ページに挿入するのではなく、HTML ページにリンクするものです。 <img> タグは、参照する画像のための表示用スペースを作成します。

チップ: 他の文書への画像にリンクするためには、単純に <a> の中に <img> タグをネストするだけです。

要素
<img>	Yes	Yes	Yes	Yes	Yes

align、border、hspace、vspace 属性は、HTML5 ではサポート対象外です。

HTML では、<img> タグに終了タグはありません。

XHTML では、<img> タグを適切に閉じる必要があります。

= HTML5 で新規追加。

属性	値	説明
align	top bottom middle left right	HTML5 ではサポート対象外。 img 内の要素の配置を指定する
alt	text	画像の代替テキスト指定する
border	pixels	HTML5 ではサポート対象外。画像の周りのボーダーの幅を指定する
crossorigin	anonymous use-credentials	canvas で使用するクロスオリジン・アクセスが可能なサードパーティのサイトからの画像を許可する
height	pixels	画像の高さを指定する
hspace	pixels	HTML5 ではサポート対象外。画像の左側と右側に空白を指定する
ismap	ismap	サーバー・サイドのイメージマップとして画像を指定する
longdesc	URL	画像の詳細な説明への URL を指定する
src	URL	画像の URL を指定する
usemap	#mapname	クライアント・サイドのイメージマップとして画像を指定する
vspace	pixels	HTML5 ではサポート対象外。画像の上側と下側に空白を指定する
width	pixels	画像の幅を指定する

<img> タグは、HTML のグローバル属性もサポートします。

<img> タグは、HTML のイベント属性もサポートします。

別な場所からの画像を挿入する
別なフォルダ、または他の Web サイトからの画像を挿入する方法。

画像のハイパーリンクを作る
画像にハイパーリンクを追加する方法。

イメージマップの作成
クリック可能な領域を持つイメージマップを作成する方法。各領域はハイパーリンクです。

ほとんどのブラウザは、次のデフォルト値を使用して <img> 要素を表示しています：

img {
display: inline-block;
}