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"になります。

最後に今回のコードをブラウザで表示したらどうなるかを載せておきます。

記事を読んでいただいてありがとうございました。