HTMLで写真を表示したいときに使うのが「<img>タグ」です。
しかし、「なぜ閉じタグがないの？」「alt属性って何？」と疑問に思ったことはありませんか？
この記事では、<img>タグの基本的な書き方から、閉じタグがない理由、そして表示されない時のチェックポイントまで、初心者にもわかりやすく解説します。
imgタグとは？HTMLで画像を表示するための基本タグ
HTMLで写真を入れるときは、<img>タグを使います。
たとえば、前回作成した「写真フォルダ」にある画像ファイルを表示する場合、次のように書きます。
【前回の記事、写真フォルダ作成←はこちらから】
・この写真ファイル名は、zeppincurry.jpeg です
codeで書くとこうなります↓↓
<img src=”images/zeppincurry.jpeg” alt=”絶品カレー画像”>
となります。
よく見ると、</img> のような閉じタグはありません。
・codeの説明はこうです↓↓
・ウェブで表示されるとこうなります↓↓
このように、src 属性で「画像ファイルの場所（パス）」を指定し、alt 属性で「画像の説明文（代替テキスト）」を書きます。
写真が表示されれば問題ありません。しかし、写真に問題があったり、コードに間違いがある等の問題があり、画像が表示されない場合に説明文が表示されます。
alt属性とは？
alt属性は、画像が表示されないときに代わりに表示される説明文です。
たとえば、画像ファイル名が間違っていたり、通信エラーで画像が読み込めない場合にこのテキストが表示されます。
なぜ<img>タグには閉じタグがないの？
<img>タグをよく見ると、</img> のような閉じタグがありません。
これは間違いではなく、正しい書き方です。
その理由は、<img>が「空要素（empty element）」だからです。
空要素とは？中身を持たないタグのこと
HTMLでは通常、タグは「開始タグ」と「閉じタグ」のセットで書きます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
しかし、<img> のように「中に何も書く必要がないタグ」は閉じタグを持ちません。
このようなタグを 空要素（empty element） と呼びます。
<img>タグは「画像を表示するだけ」で中にテキストや他の要素を入れることがないため、
閉じタグなしでも正常に動作します。
他にもある！閉じタグがないHTMLタグ（空要素）
<img>以外にも、HTMLには閉じタグのない空要素があります。代表的なのは次の2つです。
・<br> タグ（改行するタグ）
・<hr> タグ（区切り線）
これらも「中身を持たない」ので、閉じタグは不要！
・上の図は、改行するタグ<br>が無いので、そのまま表示されます。
・下の図は、改行するタグ<br>が有るので、改行されて表示されています。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
表示されないときのチェックポイント
もし画像が表示されない場合は、次のポイントを確認しましょう。
srcのファイルパス（フォルダ名・ファイル名）が正しいか- ファイル拡張子（.jpg / .jpeg / .png）が合っているか
- ファイルが正しくアップロードされているか
- alt属性が設定されているか（設定がないと「？」アイコンが出ることも）
まとめ
<img>タグは「画像を置くだけのシンプルなタグ」
- 画像を表示するタグは
<img> alt属性は代替テキストとしてSEOにも効果的- 閉じタグがないのは「空要素」だから
<br>や<hr>も空要素の仲間
<img>タグは、HTMLの中でも特にシンプルで覚えやすいタグです。
基本を理解して、正しい構文で写真を表示できるようにしましょう！
次回は、実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！ 実際にhtmlでカレーレシピを書いてみましょう！
コメント