おそらくウェブサイトを作成するときに一番使うタグだと思います。
ウェブサイトに画像を表示させるには<img>タグを使います。
画像の種類は、JPEG,GIF,PNG形式が主であり、ほかにもSVGやPDF形式
データを表示させることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> </head> <body> <img src="../wp-content/uploads/2015/06/cateHTMLPage.png" width="320" height="320" alt="HTMLのページ構造の記事です。"> </body> </html> |
<img>タグの設定するものについて
<img>の属性
src 画像ファイルのURL
alt 画像の代替テキスト
width 画像の幅
height 画像の高さ
imgタグを使用するときに気を付けること
<img>タグは空要素です。ということは閉じタグはありません。
<img>だけでは機能せず、必ずどの画像を表示するかをsrcを
使って指定しなければいけません。
パスの指定方法は、この<img>タグを使っているHTMLファイルかr
みた画像ファイルまでのパスを指定します。
widthとheightは、画像の幅、高さを指定します。単位はpxです。
width,heightを指定しなくても画像は表示されますが、
指定しましょう。ブラウザのページの読み込み速度が向上します。
alt属性には、画像を表す内容を記述します。画像が表示できない環境や
音声ブラウザで閲覧した場合でも、その画像がどんなものかわかるような
テキストをいれます。下記の例だとブログのカテゴリーを表す写真を使っています。
記述例