を表示します。次のように書くと、画像が文字の中に加わります。
書き方
<p>たとえば<img src="ninjin.png" alt="にんじん">を表示します。</p>
表示結果
たとえばを表示します。
もちろん、画像ファイルninjin.pngは、あらかじめ用意しておかなければなりません。
imgタグはインライン要素(行の中の要素)ですから，pタグのようなブロックを作るタグの中に置かなければなりません。
画像を入れるには<img>タグを使います。終了を表す</img>はありません。(xhtmlでは、その代わりに最後を > でなく /> にしますが、htmlの流れのhtml5では必要ありません)
<img>タグの中にスぺースで区切っていろいろな属性を指定しています。
src は source のことで、表示する画像の場所とファイル名をこの後に " " で囲って書きます。ここでは ninjin.png となっています。習慣として画像はフォルダに入れて整理します。よく images というフォルダを作ってその中に入れますが，その場合には、src="images/ninjin.png" と書きます。
alt は alternative の略でこの画像が何かの原因で表示できないときに代わりに表示する文字列（代替文字列）を示します。画像を表示できないブラウザもありますし、接続回線が貧弱なためにわざと画像を表示しないでブラウズする人もいます。また、視覚障害者のために文字を音声で読み上げる装置がありますが、画像は表現できないので代わりにこの文字列を読みます。ですから、この文字列は必ず入れましょう。そして、画像の内容を適切に表現したものにしましょう。
src には a タグの href と同様に、URL を書くことで他のサーバーにおかれた画像も指定することができます。これを使えば他人の画像をあたかも自分のものであるかのように表示できますが、著作権の侵害ということも起こり得ますので注意してください。
いくつかの例
<img src="images/nasu.png" alt="なすびの花の写真" > <img src="icons/maru.png" alt="・" > <img src="http://www.st.seiai.ed.jp/images/tsutsuji.jpg" alt="ツツジの写真" >
上記 alt の"・"は，画像のmaru.png () が何らかの原因で表示できない時に"・"が表示されれば似たような役割ができると考えてのことです。画像に特別意味のない時は特に内容を説明せず alt="" とする方がよいとされています。
html5とあわせて、画像に特別意味のない時はさらにalt=""そのものを省略したほうが良いという意見もでています。必要なときにだけ書くほうが、視覚障害者のためには親切だからです。
画像の高さ(height)と幅(width)指定する。px と % を使うことができる。例えばwidth="400px"。普通は実際のの大きさを書く。
画像データが送られてくる前に大きさが分かると，ブラウザがあらかじめ画像のスペースを確保してページをレイアウトできるようになります。
これを利用して画像の拡大や縮小もできますが，縮小する場合も送信されるデータ量は小さくなりません。画像処理ソフトで本当に縮小して実際の値を書く方がよいでしょう。
画像がきわめて大きく表示に時間がかかる場合に代わりに使うデータ量の少ない画像を指定する時に使う。これが使われるかどうかはブラウザの機能による。
助言的情報を提供するものです。一般的なブラウザではツールチップとして表示されます。ツールチップとは「マウスのポインタが重なった時に現れる短いメッセージ」をいいます。imgタグ以外でも使えます。
ただし、Windowsのインターネットエクスプローラ(IE)はver6まで alt 属性の内容を表示し、titleを無視しました。ver7ではどうなっているでしょうか。
W3Cの仕様書ではツールチップとして出すことを決めているわけではありません。各ブラウザの設計に任されています。HTML 4仕様書邦訳計画補完委員会が邦訳した仕様書には次のようにあります。
title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。例えば、視覚系ブラウザはタイトルを「ツールチップ」(ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ)として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。