HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。
HTML/XHTML 画像 <img /> タグ
XHTML では、画像は <img /> タグを使用して定義されます。 <img /> はペアになっていないタグです。

基本的な構文:

<img /> タグは、src 属性を通じて画像ソースを決定します。url は相対または絶対画像アドレスです。

画像タグの属性:
src: 画像のソース、必須。表示されるイメージのソース アドレスを指定します。相対アドレスまたは絶対アドレスを指定できます。
alt: 代替テキスト。省略可能です。画像を表示できない場合やブラウザが画像をブロックしている場合に表示される置換テキストに使用されます。
title: 画像のヒントテキスト。省略できます。画像の上にマウスを置くと、関連するテキストが表示されます。
width: 画像表示の幅。省略可能です。単位はピクセルです。
height: 画像表示の高さ。省略可能です。単位はピクセルです。

テキスト代替属性 (alt)
画像タグのテキスト置換属性 alt は必須属性ではありませんが、非常に重要な属性です。何らかの理由でブラウザが画像を読み取れない場合は、元の画像の代わりに代替テキストが表示され、不足している関連画像情報が提供されます。この属性は、テキストのみのブラウザを使用するユーザーが Web ページのコンテンツを理解するのにも役立ちます。
したがって、各画像に意味のある代替テキスト置換属性を追加するのが良い習慣です。

<img /> タグの使用例
画像ファイルを保存するために、e:html フォルダーの下に images フォルダーを作成します。下の画像を右クリックし、「名前を付けて画像を保存」を選択して、画像を画像フォルダに保存し、後で使用できるようにします。

XHTML example1.html を編集し、id="main-content" の div タグに次の変更を加えます。

このようにして、Web ページに画像が表示されます。

画像の表示サイズを指定する
<img /> タグに width 属性または height 属性を追加して、画像の表示サイズを手動で指定できます。

ヒント
通常、画像サイズ属性は無視され、デフォルトで元の画像サイズが表示されるか、ブラウザの適応サイズが表示されます。不適切な画像表示サイズを指定すると、画像が歪む可能性があります。
画像の読み込みにはある程度の時間がかかるため、優れたユーザーエクスペリエンスを実現するために、画像の品質を確保しながら画像のサイズを縮小するようにしてください。

さらに読む
ピクセル: ピクセルは、コンピューターが表示できる最小のドットと比喩的に考えることができます。たとえば、よく言われる画面解像度は 1024*768 ですが、これは画面に水平方向に 1024 (ピクセル) のドット、垂直方向に 768 (ピクセル) のドットがあることを意味します。単位として使用する場合、通常はデフォルトで pix と表記されます。