HTMLのimgタグについて
この記事ではHTMLのimgタグについて簡潔にサクッと学習することができます。
それでは見ていきましょう。
【imgタグについて】
下記のようなコードがあったとします。
index.html
<img src="img/tvxq_header.jpg">
これについて分解して解説します。
まずimgですが、このタグは終了タグを持たないので空要素と呼ばれたりします。
次にsrcは source の略で後に続けて画像ファイルを指定します。
今回で言う画像ファイルはimg/tvxq_header.jpgにあたります。
次にsrcの後に=を続けます。
最後に続けて"で画像ファイルを囲んで要素の完成です。
srcは属性名にあたり、"img/tvxq_header.jpg"は属性の値にあたります。
また、それら２つを合わせたものを属性と呼びます。
今回で言うとsrc="img/tvxq_header.jpg"にあたりますね。
以下にまとめました。↓
| src | "img/tvxq_header.jpg" | src="img/tvxq_header.jpg" |
|---|---|---|
| 属性名 | 属性の値 | 属性 |
【属性の値の指定】
属性の値の指定ですが
このようなファイルの構造だったとします。
index.htmlと同じ階層にあるのがimgフォルダですね。
tvxq_header.jpgはindex.htmlの１つしたの階層にあることになります。
よって今回の属性の値は"img/tvxq_header.jpg"になります。
もし仮に、imgフォルダが無くてindex.htmlと同じ階層にtvxq_header.jpgがあった場合は、src="tvxq_header.jpg"になります。
最後に今回のコードをブラウザで表示したらどうなるかを載せておきます。
記事を読んでいただいてありがとうございました。