この記事では、写真を入れるタグ <img> の使い方と、開始タグしかない理由をわかりやすく解説します！
写真を入れるタグ <img> の基本
HTMLで写真を入れるには <img> タグを使います。
前回、写真フォルダを作成したときの写真を例に簡単に説明します。
【前回の記事、写真フォルダ作成←はこちらから】
・この写真ファイル名は、zeppincurry.jpeg です
codeで書くとこうなります↓↓
<img src=”images/zeppincurry.jpeg” alt=”絶品カレー画像”>
となります。
よく見ると、</img> のような閉じタグはありません。
・codeの説明はこうです↓↓
・ウェブで表示されるとこうなります↓↓
写真が表示されれば問題ありません。しかし、写真に問題があったり、コードに間違いがある等の問題があり、画像が表示されない場合に説明文が表示されます。
説明文も表示されずに「？」マークが表示される事もあります。そんな時はどこかが間違っています！
<img> は「空要素」
通常、HTMLのタグには開始タグと、閉じタグのセットで書きます。しかし<img> に閉じタグがないのは「空要素」と呼ばれるタグだからです！
空要素とは、「中身を持たないタグ」のこと！
通常のタグは「開始タグと閉じタグの間に何かを書く仕組みです。でも、<img> は画像を表示するだけなので、中に何も書く必要はありません。そのため、閉じタグなしでOK!
他の空要素の例
<img> 以外にも、HTMLには閉じタグがないタグがあります。
・<br> タグ（改行するタグ）
・<hr> タグ（区切り線）
これらも「中身を持たない」ので、閉じタグは不要！
まとめ
・写真を入れるタグは <img>
・開始タグしかないのは「空要素」だから！
・他にも <br>（改行）や <hr> （区切り線）も空要素！
<img> は「画像を置くだけのシンプルなタグ」だから、閉じタグなしでOK!
次回は、実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！ 実際にhtmlでカレーレシピを書いてみましょう！
コメント